悬停一个元素时如何更改其他元素[重复]答案

【问题标题】：How to change other elements when one element is hovered [duplicate]悬停一个元素时如何更改其他元素[重复]
【发布时间】：2020-11-24 02:22:12
【问题描述】：

我正在尝试设置 p 悬停时它会影响 div 中另一个 div 的 img 属性。

.class2 p:hover > .class3 {
    background: black;
}



<div class="class1">
    <div class="class2">
        <p>text</p>
    </div>
    <div class="class2">
        <div class="class3">
        </div>
    </div>
</div>

【问题讨论】：

你不能用 CSS 做到这一点。你需要 JS。
在 js 中我知道该怎么做我尝试使用 css 但谢谢大家

标签： html css

【解决方案1】：

这通常是不可能的（在 CSS 中，您可以只针对兄弟姐妹或孩子，而不是父母）。

在这种情况下，您可以在父元素 (.class2) 上使用 :hover。

.class2:hover + .class2 {
    background: black;
}

<div class="class1">
    <div class="class2">
        <p>text</p>
    </div>
    <div class="class2">
        <div class="class3">
        text in the second div
        </div>
    </div>
</div>

【讨论】：

我只需要 p 标签内的文本会有悬停，而不是所有的 class2 .. 但是谢谢我改变我的 html ..
@boris：如果不更改 HTML 标记，就不可能。如果您需要/想要帮助处理 HTML 标记，只需向我们展示您所拥有的、您需要的等。我已经使用过您向我们展示的标记 - p 是 .class2 的唯一内容。 . :-)
不，没关系，只是想知道是否有办法。我通过更改 html 结构来修复它，谢谢大家

【解决方案2】：

我认为在这种情况下您可以使用pointer-events。我会稍微修改一下你的代码。

<style>
    .class2{background: #ddd}
    div.class2 {  
        pointer-events: none;
    }

    div.class2 p {
        pointer-events: auto;
    }

    div.class2:hover {
        background: yellow;
    } 
    div.class2:hover + .class2{
        background: yellow;
    } 
</style>

<div class="class1">
    <div class="class2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <p>text</p>
    </div>
    <div class="class2">
        <div class="class3">
            text2
        </div>
    </div>
</div>

【讨论】：

【解决方案3】：

您可以使用 CSS 后处理器库，例如 Axe。

在这种情况下，CSS 规则将使用 \ 选择器，如下所示：

.class2 p:hover \ .class3 {
    background: black;
}

工作示例：

div {
  border: 1px solid rgb(255, 0, 0);
  box-sizing: border-box;
}

.class1 {
  width: 240px;
  height: 160px;
}

.class2 {
  width: 160px;
  height: 80px;
}

.class3 {
  width: 80px;
  height: 80px;
}

.class2 p:hover \ .class3 {
    background: black;
}

<div class="class1">
    <div class="class2">
        <p>text</p>
    </div>
    <div class="class2">
        <div class="class3">
        </div>
    </div>
</div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

【讨论】：

不能使用 js 但谢谢