Question

假设我有这样的事情：

<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

就像“ 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 2

我有一个使用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 3

由于没有父selectors in CSS，因此在CSS中无法做到这一点。

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

Answer 4

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

将鼠标悬停在子元素上影响父元素

4 个答案: