懸停只能觸發內部div

是否可以使用純CSS（3）製作以下jQuery？懸停只能觸發內部div

$(".js.outer").hover(function() { 
    $(this).css({'border': '2px inset red'}); 
    return false; 
}, function() { 
    $(this).css({'border': 'none'}); 
    return false; 
}); 

$(".js.inner").hover(function(event) { 
    $(this).css({'border': '2px inset blue'}); 
    return false; 
}, function() { 
    $(this).css({'border': 'none'}); 
    return false; 
});

與此HTML

<div class="js outer"> 
    <div class="js inner"> 
    </div> 
</div>

我在這撥弄http://jsfiddle.net/AA9Nw/試過了，但是當我徘徊在內部元件，外部也得到了懸停事件。（使用CSS）

在附註中，jQuery似乎有點bug，當鼠標從左或右進入時，懸停效果不能正確放開。難道我做錯了什麼？

來源

2013-05-16 Mads Ohm Larsen

看看這個以前的問題，你試圖實現什麼。 http://stackoverflow.com/questions/16331754/hover-effect-wont-trigger-underlying-elements – lukeocom

是的...試圖分開你的div .. – Olrac

爲什麼你將HTML設置爲父/子元素？你可以改變它嗎？ – 2013-05-16 07:31:23

Working FIDDLE Demo

獨立您的div：

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div>

這是CSS：

.container { 
    position: relative; 
} 

.one { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100px; 
    height: 100px; 
    background: green; 
} 

.two { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    width: 100px; 
    height: 100px; 
    background: yellow; 
} 

.one:hover { 
    border: 2px solid red; 
} 

.two:hover { 
    border: 2px solid blue; 
}

來源

2013-05-16 07:35:19

是的，這解決了我的問題，但是可以使用當前的HTML結構嗎？ –

我不這麼認爲。我爲CSS編碼了8年，之前從未見過。 – 2013-05-16 07:39:37

保持冷靜，並嘗試這個

<div id="div2"></div> <div id="div3"></div>

No Javascript just only css demo

來源

2013-05-16 07:41:01 Olrac

同樣，這不是同一個HTML結構。可以用兩個元素作爲內部元素還是外部元素來完成？ –

答案可以通過「YES」或「NO」來回答。答案是'YES'。=） –

懸停只能觸發內部div

回答

相關問題