css span:hover doesn't work in IE but works in Firefox

Question

This is the basic structure of my jsp page.

<div><span><span>   </span</span></div>

The content of the innermost span tag is hidden by default. When I hover over the content of the outer span tag, it should display the content of the innermost span tag. When I run this in IE8, it successfully hides the inner span tag but when I hover over the outer span tag, it doesn't display the inner span content.

However when I run the same thing in Firefox, it works like a charm. What can I do to make it work in IE8?

This is the jsfiddle link that I created with the generated html link

Note: If I change the outer span to link(a) tag, it works in IE. But I have to use span tag.

jsp page

<div id="tooltip1">
<span id="<%=i %>" class="content" 
                   onmouseover="this.style.color='#F50A16';showStopsInfoPopup('<%=stop %>', <%=i %>)" 
                   onmouseout="this.style.color='#050505'" 
                   onClick="search(this)" value=<%=stop %>>
    <%=stop %>
    <span id="stopsInfo<%=i%>">Hi</span>
</span>
</div>

css

#tooltip1 { position: relative; }
#tooltip1 span span { display: none; color: #FFFFFF; }    
#tooltip1 span:HOVER span {display: block; 
               position: absolute; 
               background-color: #aaa; 
               color: #FFFFFF; 
               padding: 5px; 
               height: 10px} 

javascript

function showStopsInfoPopup(stop, index){
    jQuery(function($) {
        $("#stopsInfo"+index).load("showStopsInfoPopup.do?stop="+stop);
    }); 
}

Answer 1

I guess this could be done in a much easier way using jQuery as shown below:

$(".content").on("mouseover", function(){
    $(this).find("span").show();
});

$(".content").on("mouseout", function(){
    $(this).find("span").hide();
});

HTML:

<div>
   <span class="content">
   <span id="stopsInfo<%=i%>">Hi</span>
   </span>
</div>

Answer 2

:hover just won't work in older browsers, except with the a tag. If you have to use a span tag, then you'll need to add both span and a. This is how most menus work.

In your case:

<div><a><span>default text <span>(hover text)</span></span></a></div>

And the css:

a {text-decoration:none;}
a span span {display:none;}
a:hover span {display:inline;}

Demo here: http://jsfiddle.net/cV4qp/

The alternate option is to use JavaScript instead of css.

Answer 3

Because that pseudo selector supported with CSS3 and before that it is only for a tag. That s why a tag is working on IE as well. To support this you should attach mouseover and mouseout event for IE browser you can do that easily with a hack and jquery.

Just added simple changes to JS and css It should do the trick.

JS and hack only for IE

$(document).ready( function () { 
      $("#tooltip1 span.content").hover(
             function () { 
                      $(this).toggleClass("hover"); 
             });

});

CSS

#tooltip1 { position: relative; }
#tooltip1 span span { display: none; color: #FFFFFF; }    
#tooltip1 span:HOVER span { display: block; 
                            position: absolute; 
                            background-color: #aaa; 
                            color: #FFFFFF; 
                            padding: 5px; 
    height: 10px}
.hover
{
    color:red;
}

.hover span 
{
    display:inline;
    color: blue !important;
}
​

http://jsfiddle.net/7s4Np/7/