css span:悬停在IE中不起作用，但在Firefox中起作用
css span:悬停在IE中不起作用，但在Firefox中起作用
提问于 2012-11-01 01:00:39
这是我的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);
});
}回答 3
Stack Overflow用户
回答已采纳
发布于 2012-11-01 01: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>Stack Overflow用户
发布于 2012-11-01 01: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;}另一种选择是使用JavaScript而不是css。
Stack Overflow用户
发布于 2012-11-01 01: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;
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13163082
复制相关文章
相似问题
腾讯云开发者
