Hover Effect to work in both IE and Firefox

[lupes]

Hi, im trying to achieve the hover effect on a square block.

the block is part of a list at the moment but i'll change that if need be.

The way it is at the moment is, the square bloc kis green, and on mouseover, i want the whole square to change color to say blue, which is easy enough.

But the problem is, inside the square block i have a text link, which should underline on mouseover, and be its own link.

Now i can get the square block to change color on mouseover in Firefox, but not in IE because its not an anchor.

I wouldn't ask if i didnt think it could be done. But ive seen it done on this site
http://www.the-leaky-cauldron.org/ its on the 'news at a glance' section.

the whole background of each row changes on mouseover, and the link for 'more' also has its own hover effect.

I know its asking alot, but can someone please explain to me how i could get this to work in both IE and Firefox becuase i can't figure it out.

Thanks.

[ragol_67]

Do you have a link to your site? I am trying to get a better understanding of what you are trying to accomplish. The site you provided doesn't seem to be working properly for me.

If you want to change the colour of a link on MouseOver, you can use something like this:


#navigation li a:hover {
background-color: #XXX
color: #XXX


Where "XXX" is the hexidecimal colour value. So if you wanted to change a links background colour from white to yellow on mouse over, your HTML code would look like this:


<ul id="navigation">
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>


and your Style Sheet would look like this:


#navigation li a:hover {
background-color: #FFFF00

[Arbitrator]

To simulate this effect in Internet Explorer, you can "cheat" by setting the anchor element's display property to block and assigning it width and height values equal to the size of its container; you must use display: block because inline elements cannot be assigned dimensions. Naturally, this is useless if you don't have an anchor element for the hover or don't wish to specify dimensions. Example:

CSS:
a {
display: block;
width: 100px;
height: 50px;
background: yellow;
text-align: center;
}
a:link {
color: black;
background: white;
}
a:hover {
color: white;
background: pink;}

HTML:
<a href="page.html">anchor content</a>The alternative is to use JavaScript by assigning onmouseover and onmouseup events. The example page provided is using JS. Example:

CSS:
a:link {
color: black;
background: white;
}

JS:
function over(li) {
li.style.color = "white";
li.style.background = "pink";
}
function out(li) {
li.style.color = "";
li.style.background = "";
}

HTML:
<li onmouseover="over(this);" onmouseout="out(this);">
<a href="page.html">anchor content</a>
</li>Note that there are more efficient implementations of JS for this purpose including those that don't require you to spam the markup with the event attributes; I'm not very familiar with JS however, so I can't elaborate further.