2013-02-23 150 views
3

:懸停不工作

http://jsfiddle.net/E9DXJ/

<nav> 
<div class="container"> 
    <div class="row-fluid center"> 
     <div id="navcontainerimg" class="span12 center"> 
      <img src="img/hs-header.png"/> 
     </div> 
     <div id="navcontainernav" class="span12 center"> 
      <span class="topleft">Our Story</span> 
      <span class="topright">Awesome Support!</span> 
      <span class="bottomleft">Read the Blog!</span> 
      <span class="bottomright">Join Now</span> 
     </div> 
    </div> 
</div> 

的類可以不設置樣式:在應用到我的風格懸停不工作徘徊,但他補充說,當它什麼都不做。如果我點擊:chrome懸停式顯示,它會顯示在那裏,但不起作用。

回答

10

這是因爲你已經設置了負z-index的容器因此Chrome基本上不會承認懸停事件。

將其更改爲:

#navcontainernav  
{ 
    width: 720px; 
    margin-left: 40px; 
    height: 170px; 
    top: -233px; 
    border-radius: 8px; 
    position: relative; 
    z-index: 1; 
} 

或任何其他正值。

+0

愛你。謝謝! – 2013-02-23 16:17:45

+0

湯姆,這工作,但現在它創造了另一個問題。我簡化了小提琴,但是在這四個角落之間存在一個圖像。我通過使用z-index> 0來使懸停工作,但如果我將圖像放在上面,它仍然不起作用。有沒有辦法做到這一點,而不是把圖像分成兩部分(我想像一個矩形與分開的圓圈可能工作),但我寧願在CSS中做。 http://healthysurprise.com/so – 2013-02-23 16:33:12

+0

嗯,這是一個艱難的一個,怎麼樣使之包含正確的剪輯(比如http://cl.ly/N7pB - 其中紅色邊框表示圖像)改變你的形象,然後帶來的nav的'z-index'高於它? – 2013-02-23 17:10:29

2

上#navcontainernav z索引變化:-5;到z-index:1;

適用於所有瀏覽器

+0

這並不提供答案的問題。要批評或要求作者澄清,請在其帖子下方留言。 – 2013-02-23 11:08:54

+0

抱歉..不明白你的答案..問題是懸停!這將通過改變Z指數來工作 – bernte 2013-02-23 11:15:39