Css 相同嵌套div悬停效果

我有以下资料：

我怎样才能做到：

• 如果将鼠标悬停在

  第1行

  ，则只显示

  第1行的边框

• 如果将鼠标悬停在

  第2行

  ，则只显示

  第2行

  的边框，而不是同时显示这两行

HTML:

---

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

你可以试试

.container > .box > .box:hover

---

您需要为它们提供两个不同的CSS类。由于两个Div使用相同的

class=“box”

，因此将在两个Div上触发

.box:hover

命令

对于css，您可以将其设置为只有内部的

.box

类才能获得hover命令：

.box.box:悬停{
边框颜色：红色；}

解决方案：

已更新： 基本上，没有一个简单的方法。可以说，你得假装一下。请参阅下面的代码：

HTML:

这使得box2通过使用相对定位“看起来”是box1的子代，而实际上，box1不是box2的父代，而是兄弟姐妹。

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

所有当前答案仅针对答案的部分。。但是如果您坚持，这里有一个jQuery解决方案——所有元素都具有相同的类，尽管我建议您重命名它们，并完全避免jQuery

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

-适用于所有级别

$(".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", "");
});

---

但是，如果您将鼠标悬停在

第1行

以外的第2行，则

第1行

将获得颜色？您不能仅使用css，因为您总是在父分区上。。。有了css，如果我只有一个孩子，你就不能向父母求助，也不能设置停止。一个很好的方法是使用jquery。首先必须导入jquery库，然后才能使用

hover

函数。我想我的问题还不清楚。我编辑了原始帖子，以便更容易理解我需要什么。我想我的问题不清楚。我编辑了原始帖子，以便更容易理解我需要什么。我想我的问题不清楚。我编辑了原始帖子，以便更容易理解我需要什么。

.container > .box > .box:hover

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

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

$(".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", "");
});