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

这是我的jsp页面的基本结构。css span：hover在IE中不起作用，但在Firefox中工作

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

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

但是，当我在Firefox中运行相同的东西时，它就像一个魅力。我能做些什么来使它在IE8中工作？

这是我生成的HTML link

注创建的jsfiddle链接：如果我改变外跨度链接（一）标签，它工作在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); 
    }); 
}

来源

2012-10-31 Susie

尽可能地避免内联事件处理程序。用jQuery绑定它们并不困难。 –

谢谢..我从来没有使用过jQuery。你能指点我一个绑定的例子吗？ – Susie

我想这可以使用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-31 17:07:43 Praveen

谢谢。我之前几乎没有使用过jQuery，但我会尝试一下。 – Susie

因为与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/

来源

2012-10-31 17:07:08

你能告诉我什么样的黑客和jQuery的什么功能，因为我之前没有使用过jQuery吗？ – Susie

：悬停只能在旧版浏览器中运行，除了使用标记。如果您必须使用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/

备用选项，而不是使用CSS的JavaScript。

来源

2012-10-31 17:09:59 Christophe

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

回答

相关问题