html - 是否有选择器只影响最里面的 :hover match with CSS only?

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>