将鼠标悬停在子元素上会影响父元素[重复]

Question

这个问题已经在这里有了答案：

• 是否有CSS父选择器？ 31个答案

假设我有类似的内容：

 <div class="bigWrap"> <div class="element"> ... <div class="HoverThisElement"></div> ... </div> <div class="element"> ... <div class="HoverThisElement"></div> ... </div> <div class="element"> ... <div class="HoverThisElement"></div> ... </div> </div> 

当他的孩子.HoverThisElement悬停时，我需要影响.element。 我可以那样做吗？ 如果可能，请以SASS为例

Answer 1

我有使用pointer-events CSS的解决方法。 这可能会有所帮助。

 .element { background: red; padding: 10px; margin: 10px; pointer-events: none; } .HoverThisElement { background: yellow; padding: 15px; pointer-events: auto; } .element:hover { background: green; //add some styles you want to parent element } 

 <div class="bigWrap"> <div class="element"> <div class="HoverThisElement"></div> </div> <div class="element"> <div class="HoverThisElement"></div> </div> <div class="element"> <div class="HoverThisElement"></div> </div> </div> 

Answer 2

就像“ little_coder”说的那样，您可以欺骗这个。

但是，当您想支持IE10（不支持指针事件）时，您可以使用覆盖DIV并使用同级选择器作为目标（也可以使用伪元素）。

.overlay {
    position: absolute;
    background-color: red;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    transition: all .3s;
}

.HoverThisElement {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: yellow;
    z-index: 3;

    &:hover {
        + .overlay {
            right: 200px;
        }
    }
}

https://codepen.io/herrfischer/pen/xxKEjqR

Answer 3

在CSS中无法执行此操作，因为CSS中没有父选择器 。

如果您确实需要这样做，那么唯一的方法就是使用JavaScript

Answer 4

如Logan所说，没有父选择器，您需要执行以下操作：在“ HoverThisElement”鼠标上，将活动类添加到最接近的“元素”，在鼠标上，将活动类删除