有没有一个选择器只影响最里面的:hover 只与 CSS 匹配？

Question

对于管理自定义布局的功能，我创建了一个带有区域指示的小向导，以便提供查看您正在编辑的区域的机会。

由于它是嵌套布局，因此所有容器都具有相同的 CSS 类值。为了只发出最里面的元素，我编写了一小段 JavaScript 代码。准确来说是这样的：

$outermostContainer.on("mousemove", function(event) {
    var $t = $(event.target).closest("table.dashboardLayoutOutline");
    $layoutWizardTables.removeClass("hovering");
    $t.addClass("hovering");
});

示例案例：

http://jsfiddle.net/w0sw9510/（如果您将鼠标悬停在其中一个子元素且父元素没有黄色边框，则该解决方案是正确的，而如果您将鼠标悬停在仅外部元素上，该元素将收到黄色边框）边框）

这真的是我无法仅使用 CSS 做某事的情况吗？

不知怎么的，我无法想象我是唯一一个可以用这个的人。

我研究过 W3C + mozilladocs 的 CSS 2/3 选择器，但我见过的选择器似乎无法处理我需要的情况。

这些天我主要做后端，所以我希望你们中有人知道我的技巧。

_{重复问题：虽然这个问题与我的问题类似，但由于其标题，我在搜索时没有找到它。我只是将其留在这里，以便其他人也能找到答案，以防他们使用相同的搜索词。}

Answer 1

仅使用 CSS 似乎不可能，因为当子元素悬停时，父元素也会悬停（并且

pointer-events: none

没有帮助）。然而 JavaScript 让它变得非常简单：

$('.zone').on('mouseover mouseout', function(e) {
    $(this).toggleClass('hovering', e.type === 'mouseover');
    e.stopPropagation();
});

.zone {
    margin: 10px;
    box-sizing: border-box;
    border: 5px solid transparent;
}

.zone.hovering {
    border: 5px solid yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="zone" id="parent" style='background-color: orange;'>
    <div class="zone" id="child1" style='background-color: red;'>a</div>
    <div class="zone" id="child2" style='background-color: blue;'>b</div>
</div>

嗯，实际上可以只用 CSS 来做到这一点，但是解决方案不是很灵活和通用，因为它取决于父容器的背景颜色：

.zone {
    margin: 10px;
    box-sizing: border-box;
    border: 5px solid transparent;
    position: relative;
}

.zone:hover {
    border: 5px solid yellow;
}

.zone > .parent-border {
    position: absolute;
    top: -5px; left: -5px; bottom: -5px; right: -5px;
    display: none;
    z-index: 1;
}

.zone > .zone {
    z-index: 2;
}

.zone > .zone:hover ~ .parent-border {
    border: 5px orange solid;
    display: block;
}

<div class="zone" id="parent" style='background-color: orange;'>
    <div class="zone" id="child1" style='background-color: red;'>a</div>
    <div class="zone" id="child2" style='background-color: blue;'>b</div>
    <div class="parent-border"></div>
</div>

Answer 2

现在 :has() 伪类已经存在，你可以这样做：

.item {
    margin-left: 12px;
    background-color: white;
}

.item:hover{
    background-color:blue !important;
}

.item:has(.item:hover) {
    background-color: white !important;
}

<div class="item">
    <p>Item 1</p>
    <div class="item">
        <p>Item 2</p>
        <div class="item">
            <p>Item 3</p>
            <div class="item">
                <p>Item 4</p>
            </div>
        </div>
    </div>
</div>