Is This Possible?? (Change div background on hover..)

Hi OK picture this...

I have 1 div.
Inside it is a thumbnail img floated left.
Then some text to the right of the img regarding the link and views, tags information etc..

I was wondering if i could change the background colour/background image when a user hovers over this div??

But i would like the different links inside the div to still remain valid e.g links for tags.

 

.divclass:hover {background-color: #FFF;}

i guess you mean changing the background colour of this div element

 

That wont work in I.E will it?

 

Not without javascript or whatever:hover, no. But it would work for everyone else.

wd, you could wrap the whole image and text in an <a>nchor, which would make everyone do something on hover. It would change the background colour of that group... but if there are multiple images/links in one div, then none of them alone can affect the whole div.

 

I have multiple links inside the div...
What i tried is:
div.whatever:hover { background:url(whatever.jpg) ;} This seemed to work OK in FF and I.E and changed the background image when the mouse was on the div?

 

Heh, by "whatever:hover" I meant this file that tells IE6 to recognise :hover on something other than a <a>...
website: http://www.xs4all.nl/~peterned/csshover.html
file: http://www.xs4all.nl/~peterned/htc/csshover2.htc

If you wanted the whole div which contains a bunch of links to do that same thing whenever any of the links inside is hovered over (not NOT simply when the div itself was hovered meaning you only wanted this to happen when a LINK was hovered), then you could do something fancy like this:
<div id="bar">
<div id="foo">
<a href="#"><img src="foo.gif" width="" height="" alt="" />text text text</a>
<a href="#"><img src="bar.gif" width="" height="" alt="" />text text text</a>
<a href="#"><img src="spam.gif" width="" height="" alt="" />text text text</a>
</div>
</div>

#foo {
background-color: white;
}
#bar :hover > #foo {
background-color: red;
}

Eh, not sure if this works, it's something like, if some child in #bar is hovered over, then its child #foo turns red. Maybe it could be more specific like
#bar a:hover > #foo {
background-color: red;
}
When an anchor which is some (not direct) child of #bar is hovered, #foo changed red. Of course, IE6 doesn't know what > is, so no go.

It's much easier to do it for just changing the image which is inside the <a> and would also work with IE6. But if the parent needs to be affected because of the child being hovered, that's harder (like above, which I don't even know if it works).

 

I want a robust way of changing a background image of a DIV, on hover. As I understand it I need to either use JS or wrap it in an anchor? Am I correct?

 

Hi!

I Think U Should Try Javascript :S

<table border="1" width="100%">
<tr id="tr1" onmouseover="document.getElementById('tr1').style.backgroundColor='#ccc';" onmouseout="document.getElementById('tr1').style.backgroundColor='#fff';">
<td>
&nbsp;
</td>
</tr>
<tr id="tr2" onmouseover="document.getElementById('tr2').style.backgroundColor='#f00';" onmouseout="document.getElementById('tr2').style.backgroundColor='#fff';">
<td>
&nbsp;
</td>
</tr>
<tr id="tr3" onmouseover="document.getElementById('tr3').style.backgroundColor='#ff0';" onmouseout="document.getElementById('tr3').style.backgroundColor='#fff';">
<td>
&nbsp;
</td>
</tr>
</table>