jquery - 悬停只触发内部 div

Question

是否可以使用纯 CSS(3) 制作以下 jQuery？

$(".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>

我试过这个 fiddle http://jsfiddle.net/AA9Nw/ ，但是当我悬停内部元素时，外部元素也会获得悬停事件。 (使用 CSS)

附带说明一下，jQuery 似乎有点问题，当鼠标从左侧或右侧进入时，悬停效果无法正确释放。我做错了什么吗？

Answer 1

保持冷静，试试这个

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

No Javascript just only css demo