假设我有两个元素,“ A”和“ B” ...当您将鼠标悬停在A上时,我希望B更改颜色,当您将鼠标悬停在B上时,我希望A更改颜色...
我已经找到了常用的同级选择器,例如(〜)和(+),但是它们只允许A影响B。我可以进行ul { display: flex; }
A和B交换,但那只会允许B影响A。
我正在制作的网站上的所有内容均正常运行,我只想创建一种“配对链接”系统...基本上,两个链接(如果其中一个都悬停了,两个链接的作用都就像它们被悬停了一样)...
我试过(-)只是为了看看它是否有效,但是没有...我试过用(>)悬停在父对象上,但这只是使所有链接都像被悬停一样结束了(我想了很多,但是我仍然必须尝试)...老实说,我还没有永远做过html和css,所以我不确定我缺少什么...
通过突出显示已悬停的所有列表项
并重置已悬停的列表项的样式,可以实现类似的效果:
ul {
padding: 0;
list-style: none;
}
ul:hover > .item {
color: red;
}
li.item:hover {
color: initial;
}
- A
- B