0

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

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

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

但是，当我在 Firefox 中运行相同的东西时，它就像一个魅力。我该怎么做才能让它在 IE8 中工作？

这是我使用生成的 html 链接创建的 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);
    }); 
}
4

3 回答 3

2

我想这可以使用 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>
于 2012-10-31T17:07:43.140 回答
2

: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。

于 2012-10-31T17:09:59.267 回答
1

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

只需对 JS 和 css 添加简单的更改就可以了。

JS 和 hack 仅适用于 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/

于 2012-10-31T17:07:08.350 回答