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>

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

另一方面，jQuery似乎有点儿马车，当鼠标从左侧或右侧进入时，悬停效果不能正常进行。我做错了吗？

Answer 1

保持冷静，试试这个

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

No Javascript just only css demo

Answer 2

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;
}

徘徊到只触发内部div

2 个答案: