当鼠标悬停在其中任何一个上时,CSS会更改两个链接

前端之家收集整理的这篇文章主要介绍了当鼠标悬停在其中任何一个上时,CSS会更改两个链接前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有以下html:

我正在尝试做的是在一个人被徘徊时改变两个链接的状态.例如,如果我将鼠标悬停在< div id =“home”>下的’about’上我希望两个链接,一个和

下的一个链接以不透明度显示.

如果可能的话,我正试图远离JS.到目前为止,我对CSS的尝试一直是与相邻的选择器,但这对我来说是新的,所以我无法使它工作.

    #home .about_li a:hover + #nav .about_li a {
        opacity: .5;
    }

这可以用CSS完成吗?

编辑:

谢谢你的回复.我如何更改相邻选择器的HTML才能工作?如果它不会严重影响网站的其他部分(我现在的结构非常完整),我可以尝试一下并做一些调整.

另一个编辑:

好的,我已经阅读了更多关于这些选择器的内容,现在我明白了.我认为通过成为主要div中的所有人都是兄弟姐妹:P现在我明白为什么它不起作用.我会看看我是否可以提出一个仅使用CSS的解决方法,并将在此处发布.否则我会和JS一起去:(

最佳答案
不幸的是,你的结构对于CSS选择器来说太复杂了,因为a元素不是彼此的兄弟,但它是你的内部div,依此类推.

使用像jQuery这样的JavaScript库非常容易,否则你运气不好.

猜你在找的CSS相关文章