Question

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

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

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

然而，当我在Firefox中运行相同的东西时，它就像一个魅力。我该怎么做才能使它在IE8中运行？

这是我使用生成的html link

创建的jsfiddle链接

注意：如果我将外部范围更改为link（a）标记，则它在IE中有效。但我必须使用span标签。

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

我想这可以使用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>

Answer 2

：悬停只是在旧版浏览器中无法使用，除了使用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。

Answer 3

因为CSS3支持伪选择器，在此之前它仅用于标记。这就是为什么标签也在IE上工作的原因。为了支持这一点，您应该为IE浏览器附加mouseover和mouseout事件，您可以使用hack和jquery轻松完成。

刚刚为JS和css添加了简单的更改它应该可以解决这个问题。

JS和黑客只针对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/

css span：hover在IE中不起作用，但在Firefox中有效

3 个答案: