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做某事吗？

我无法想象我是唯一一个对此有用的人。

我已经研究了用于css 2/3选择器的w3c + mozilladocs，并且没有我见过的选择器似乎可以处理我需要的情况。

这些天我主要做后端，所以我希望你们中的一个对我有所了解。

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

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>

<强> UPD 即可。好吧，它实际上可以在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>

是否有一个只影响最内层的选择器：仅与css进行悬停匹配？

1 个答案: