Question

我怎样才能这样做：

如果您将鼠标悬停在Line 1上，则会显示Line 1
如果您将鼠标悬停在Line 2上方，则会显示Line 2的边框，而不是两者

HTML：

<div class="container">
    <div class="box">
        Line 1.
        <div class="box">
            Line 2.
        </div>
    </div>
</div>

CSS：

.container {
    width: 500px;
}

.box {
    padding: 12px;
    border: 1px solid grey;
}

.box:hover {
    border-color: red;
}

Answer 1

如果所有类必须相同（如标题所示），那么这不是完全可能在 纯 CSS 。

所有当前的答案只能解决答案的部分 ..但是如果你坚持，这里是一个jQuery解决方案 - 所有元素都有相同的类，虽然我建议你重命名它们，并避免使用jQuery共

尽管如此，这是一个解决方案，不要求更改类名：

jsFiddle example - 适用于所有级别。

$(".box").children().hover(function () {
    $(this).parent().css("border-color", "grey");
    $(this).css("border-color", "red");
}, function () {
    $(this).parent().css("border-color", "");
    $(this).css("border-color", "");
});

Answer 2

你应该给它一个不同的课程。您可以选择使用JavaScript来检测哪个元素正在悬停，但我不建议这样做。

你可以尝试

.container > .box > .box:hover

Answer 3

你需要两个不同的CSS类。既然你有两个Div使用相同的class="box"，那么.box:hover命令将在两个div上被触发。

对于css，您可以设置它，以便只有内部.box类获取hover命令：

.box .box:hover { border-color: red; }

解决方案：http://jsfiddle.net/2hDB9/2/

Answer 4

更新：http://jsfiddle.net/2hDB9/11/

基本上，没有一种简单的方法。你可以说它有点伪造它。请参阅以下代码：

HTML：

<div class="container">
    <div class="box1">
        Line 1.
    </div>
    <div class="box2">
        Line 2.
    </div> 
</div>

CSS：

.container {
    height:50px;
    padding:50px;
}

.container:hover {
}

.box2 {
    height:50px;
    width:75%;
    border:2px solid black;
    position: relative;
    top: -110px;
}

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

.box1{
    position: relative;
    height:50px;
    padding: 20px 20px 40px 20px;
    top: -50px;
    left: -50px;
    border:2px solid black;

}

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

这使得box2通过使用相对定位“显示”为box1的子节点，而实际上，box1不是box2的父节点，它们是兄弟节点。

相同的嵌套div悬停效果

4 个答案:

更新：http://jsfiddle.net/2hDB9/11/