悬停只能触发内部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

回答

相关问题