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中工作

回答

相關問題