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

Question

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

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

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

示例案例：

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

这真的是我不能只用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>

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

Is there a selector to only affect the innermost :hover match with CSS only?

html

css

hover