hover problem with non link elements in IE

is there any way to use "hover" attribute for all html elements instead of just '' in IE?

for example 'li:hover' . it doesn't work in IE6 . (i don't know about other versions of IE).

Edited: i just want to do it with CSS no javascr开发者_JS百科ipt. it is a simple menu.

No, IE6 didn't properly implement the :hover pseudo-class for all elements. It only supports it for anchors.

I don't think there is anyway that you can do it without javascript in IE 6.

If it is a one level menu, you might be able to tweak the styling to make the links render as display:block inside of the li so you can perform hovers on them, and if needed put spans inside the links for extra styling flexibility, but personally never had much luck trying to extend that to multi level menus.

A strategy of graceful degradation may be your best bet there.

Use onmouseover/onmouseout with javascript.

When you mouseover an element you simply show a hidden div with your hover contents.

When you mouseout of an element you will then hide the div with you hover contents.

Jquery makes this easier if you dont want to do all the leg work

<span id="hoverSpan" class="hoverelement" hoverdata="this is my hoverdata">HoverSpan</span>
<a href="#" id="hoverAnchor class="hoverelement" hoverdata="this is my hover data">HoverAnchor</a>
<div id="hoverdiv" style="display:none"></div>

<script language="javascript">
  $(document).ready(function () {
     $(".hoverelement").each( function () {
       var myelement = $(this);
       myelement.mouseover( function (e) {
         var myhovertext = myelement.attr("hoverdata");
         $("#hoverdiv").html(myhovertext).show();
       });
       myelement.mouseout( function (e) {
         $("#hoverdiv").html(myhovertext).hide();
       });
     });
  });
</script>

Its late and I did not test this, but the idea is there. Basically you would make a hover for any element with the class "hoverelement"

try jquery...i don't know exactly but it might work in IE6....