enable mouseover on a div element via css

[spinnergy]

This is an interesting CSS problem I have.

I am trying to enable mouseover for an entire div, not just the hyperlinked text that appears inside it. So I am encapsulating the div within "A" tags like so:

<a href="blah"><div>This entire div will respond to mouseover, not just the text, but only if it is contained in a table with a bgcolor</div></a>

Click here for an example:
<snip>

In order to get this to work, I had to encapsulate the parent div that contains the menu divs in a table with a bgcolor attribute. Leaving the bgcolor off disables mouseover events from firing on anything but the linked text.

I would like to avoid the bgcolor trick altogether. Is there some setting I can put on the containing div element that will have the same effect as the bgcolor trick on the table?

Here's the source:

<table cellspacing="0" cellpadding="0" width="150" border="0" bgcolor="#FFFFFF">

<tr>
<td colspan="2"><style>

.expando {
border-bottom:1px solid #CCCCCC;
}

.expando DIV {
font-family:tahoma,verdana;
font-size:11px;
padding:7px;
}

.expando A {
text-decoration:none;
color:#000000;
}

.expando A:hover {
text-decoration:underline;
}

.expando .header {
background-color:gainsboro;
}

.expando .level1 {
padding-left:15px;
border-top: 1px solid #CCCCCC;
background-color:#e9e9e9;
}

.expando a:hover .level1 {
color:slateblue;
text-decoration:none;
background-color:#efefef;
}

.expando .level2 {
padding-left:25px;
border-top:1px dotted #cccccc;
}

.expando .level3 {
padding-left:35px;
border-top:1px dotted #cccccc;
}

.expando .level4 {
padding-left:45px;
border-top:1px dotted #cccccc;
}

.expando .level5 {
padding-left:55px;
border-top:1px dotted #cccccc;
}

.expando a .active {
color:slateblue;
font-weight:bold;
}

.expando a:hover .active {
text-decoration:none;
}

</style>

<div class="expando"><div class="header">Products</div><a href="default.asp?ID=4" ><div class="level1">Rear Projection</div></a><a href="default.asp?ID=9" ><div class="level2">Sony</div></a><a href="default.asp?ID=17" ><div class="level3"><span class="active">Grand Wega 60"</span></div></a><a href="default.asp?ID=18" ><div class="level3">Wega Plasma 42"</div></a><a href="default.asp?ID=19" ><div class="level3">Wega LCD 23"</div></a><a href="default.asp?ID=10" ><div class="level2">Philips</div></a><a href="default.asp?ID=11" ><div class="level2">Samsung</div></a><a href="default.asp?ID=12" ><div class="level2">Hitachi</div></a><a href="default.asp?ID=5" ><div class="level1">DLP</div></a><a href="default.asp?ID=6" ><div class="level1">Plasma</div></a><a href="default.asp?ID=7" ><div class="level1">Nanotube</div></a><a href="default.asp?ID=8" ><div class="level1">Projectors</div></a></div></td>
</tr>
</table>

[edited by: engine at 3:12 pm (utc) on July 22, 2003]
[edit reason] No urls, thanks. See TOS [webmasterworld.com] [/edit]

[broniusm]

spinnergy-
have you considered something to the effect of:

a.divhover { width:100%; height:100%; /* etc */ }
<div><a class="divhover">my link</a></div>
<div><a class="divhover">my link</a></div>
<div><a class="divhover">my link</a></div>

[Reflection]

You would have to throw in display:block as well.

[TGecho]

If you set the a to display:block it will act exactly like a div (as far as page flow goes). You don't even need the div!

[DrDoc]

Welcome to Webmaster World!

You can just do .myclass:hover (not supported by crappy IE though)

However, if you want it linked, then display:block is the way to go.

[spinnergy]

Thanks for all the help. I settled on this due to the great suggestions here:

<snip>

If you view source, you can see that the tag nesting is a bit better since the <a> tags are no longer containing the divs. Its the other way around now, which I think is better practice.

I would welcome any comments on the usability of the menu.

[edited by: engine at 3:13 pm (utc) on July 22, 2003]
[edit reason] No urls, thanks. See TOS [webmasterworld.com] [/edit]

[spinnergy]

Here is the code that works pretty flawlessly on IE and NN7 on PC, however, On Mac Safari 1.0, the Products header extends past 100% on the right. Any clues on why?