悬停时更改所有兄弟元素的样式？

Question

这是我的片段：

<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 实现吗？

Answer 1

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

如果您打算在 中放入更多内容main，则可以将a标签包装在 a 中div，然后div:hover改为target 。

<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>