Make a div with image a:hover?

[Gnolen]

Hi,

I am wondering if someone could guide me in the right direction about
this. How can I make div 'one' hover? Does not need to be
clickable/link...It would be easy if the images was not there..But now
it is..

<div class="one"><im g src="img/someimage.gif" alt="" /><a
href="index.php ">Text bla bla bla</a></div>

I know that I have to do something like:

..one a {
display: block;
width: 200px;
height: 40px;
background-color: #f1f1f1;
padding: 5px;
}

..one a:hover {
display: block;
width: 200px;
height: 40px;
background-color: #ccccc;
padding: 5px;
}

Anyone know how?

Greetings and thanks from Gnolen

[kaeli]

In article <11************ *******@newsb.t elia.net>, he***********@h otmail.com
enlightened us with...

I am wondering if someone could guide me in the right direction about
this. How can I make div 'one' hover?

I don't think that's supported until CSS2, but don't quote me.

I know you can do this with javascript.
<div class="one" onMouseOver="so meFunction()" onMouseOut="som eOtherFunction
()">

--
--
~kaeli~
Suicide is the most sincere form of self-criticism.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[Martin!]

Gnolen wrote:

Hi,

I am wondering if someone could guide me in the right direction about
this. How can I make div 'one' hover? Does not need to be
clickable/link...It would be easy if the images was not there..But now
it is..

<div class="one"><im g src="img/someimage.gif" alt="" /><a
href="index.php ">Text bla bla bla</a></div>

I know that I have to do something like:

.one a {
display: block;
width: 200px;
height: 40px;
background-color: #f1f1f1;
padding: 5px;
}

.one a:hover {
display: block;
width: 200px;
height: 40px;
background-color: #ccccc;
padding: 5px;
}

Anyone know how?

Greetings and thanks from Gnolen

IE only supports :hover on anchors with a href.
(think Gecko supports :hover on many more elements)
make the a 'display: block' and remove the div.
of course, in the hover you only add what changes.
if you really want you can put the image in the background.

a.one {
display: block;
width: 200px;
height: 40px;
padding: 5px;
background-color: #eee;
background-image: url(img/someimage.gif);
background-repeat: no-repeat;
}

a.one:hover {
background-color: #ccc;
}

<a class="one" href="index.php ">Text bla bla bla</a>
gl
martin

[Martin!]

to make sure your text will appear below to the image you can ajust the
padding

a.one {
padding: 45px 5px 5px 5px;
}

this will make your a-block 45+40+5 px high (in standard mode)
unless you add so much text that it doesnt fit, in that case IE will
stretch your a-block , and in gecko it will appear growing outside the
a-block