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

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

当然，这是可能的。我在下面添加了样式。你可以看到它在 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>