悬停时更改所有兄弟元素的样式？ [复制]答案

【问题标题】：change style of all sibling element when hover? [duplicate]悬停时更改所有兄弟元素的样式？ [复制]
【发布时间】：2020-05-14 10:12:49
【问题描述】：

这是我的sn-p：

<div class="main">
    <a href="" target="_blank">
        a
    </a>

    <a href="" target="_blank">
        b
    </a>

    <a href="" target="_blank">
        c
    </a>

    <a href="" target="_blank">
        d
    </a>
</div>

<style>
.main a {
    background: blue;
    width: 50px;
    height:50px;
    display: inline-block;
    color: #ffffff;
}

.main a:hover {
    
}
</style>

当我悬停每个框时，我想将不透明度更改为所有蓝色的.5，结果将是这样

这可以用 css 实现吗？

【问题讨论】：

标签： html css

【解决方案1】：

当然，这是可能的。我在下面添加了样式。你可以看到它在this codepen 上工作。它依赖于检测悬停在父级以及单个子级上。

如果您打算在main 中添加更多内容，您可以将a 标签包装在div 中，然后改为定位div:hover。

<div class="main">
    <a href="" target="_blank">
        a
    </a>

    <a href="" target="_blank">
        b
    </a>

    <a href="" target="_blank">
        c
    </a>

    <a href="" target="_blank">
        d
    </a>
</div>

<style>
.main a {
    background: blue;
    width: 50px;
    height:50px;
    display: inline-block;
    color: #ffffff;
}

.main:hover a {
  opacity: 0.5;
}

.main:hover a:hover {
  opacity: 1;
}
</style>

【讨论】：

【解决方案2】：

假设在主元素中只有您想要添加此效果的对象，我会尝试这样的事情：

.main:hover a { opacity: 0.5 }

和被选元素：

.main:hover a:hover { opacity: 1}

这应该会创建您想要实现的效果。

【讨论】：