Here’s a small snippet I use when I want to change style based off of the :hover state of the element. Usually we could just use the :hover pseudo-class (apart from the fact that IE6 will only acknowledge :hover on link tags only). The solution is to use some javascript to add/remove a .hover class on the elements we want to hover over (I mostly use this for lists).

Event.observe(window, 'load', function() {
  $$('.hoverable > *').each(function (e) {
    Event.observe(e, 'mouseover', function() {
      Element.addClassName(e, 'hover');
    });  

    Event.observe(e, 'mouseout', function() {
      Element.removeClassName(e, 'hover');
    });
  });
});

To use the above script, you need to mark any parent elements as .hoverable to have any of it’s direct children gain and lose .hover on :hover, such as the follow:

<ul id="menu" class="hoverable">
  <li><a href="#">First Item</a></li>
  <li><a href="#">Second Item</a></li>
  <li><a href="#">Last Item</a></li>
</ul>

This is also easily written using jQuery, though as I mostly deal with Rails applications without an explicit need to use jQuery, this is the Prototype version I use. A jQuery version of this snippet can be found in the post, Make DOM elements hoverable using jQuery.