问css span:悬停在IE中不起作用，但在Firefox中起作用
EN

Stack Overflow用户

提问于 2012-10-31 17:00:39

回答 3查看 1.9K关注 0票数 0

这是我的jsp页面的基本结构。

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

默认情况下，最里面的span标记的内容是隐藏的。当我将鼠标悬停在外部span标记的内容上时，它应该显示最里面的span标记的内容。当我在IE8中运行它时，它成功地隐藏了内部范围标记，但是当我将鼠标悬停在外部范围标记上时，它不显示内部范围内容。

然而，当我在Firefox中运行同样的东西时，它就像一个护身符。我能做些什么才能让它在IE8中工作？

这是我用生成的html link创建的jsfiddle链接。

注意:如果我将外部跨度改为link(a)标签，它在IE中是有效的。但是我必须使用span标签。

jsp页面

<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);
    }); 
}

javascript

css

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-10-31 17:07:43

我想使用jQuery可以更容易地完成这项工作，如下所示：

$(".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>

票数 2

Stack Overflow用户

发布于 2012-10-31 17:09:59

:hover在较旧的浏览器中不能工作，除非使用a标记。如果你必须使用span标签，那么你需要同时添加span和a。这是大多数菜单的工作方式。

在您的案例中：

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

和css：

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

演示：http://jsfiddle.net/cV4qp/

另一种选择是使用JavaScript而不是css。

票数 2

Stack Overflow用户

发布于 2012-10-31 17:07:08

因为CSS3支持的伪选择器以及之前的伪选择器只用于标记。这就是为什么标签在IE上也是有效的。为了支持这一点，你应该为IE浏览器附加mouseover和mouseout事件，你可以通过hack和jquery很容易地做到这一点。

只需向JS和css添加简单的更改，它应该可以做到这一点。

仅适用于IE的JS和hack

$(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;
}