html – 在悬停元素时更改列表(ul)的所有其他元素li的css属性

html – 在悬停元素时更改列表(ul)的所有其他元素li的css属性,第1张

概述我真的想知道是否可以在悬停其中一个元素的同时更改列表中所有其他元素的属性. 让我们说当我悬停“元素2”时,我希望其他人:“元素1”,“元素3”和“元素4”css颜色属性变为“红色”而不是悬停的那个. 有没有可能只用css?那个实际的功能有一个css选择器吗? <ul id="list"> <li class="element">element 1</li> <li class="eleme 我真的想知道是否可以在悬停其中一个元素的同时更改列表中所有其他元素的属性.

让我们说当我悬停“元素2”时,我希望其他人:“元素1”,“元素3”和“元素4”CSS颜色属性变为“红色”而不是悬停的那个.

有没有可能只用CSS?那个实际的功能有一个css选择器吗?

<ul ID="List">  <li >element 1</li>  <li >element 2</li>  <li >element 3</li>  <li >element 4</li><ul>
解决方法 您可以使用伪类更改所有li子项的颜色:将鼠标悬停在父项ul上.

然后你只需要覆盖当前悬停的孩子并将其设置回原始颜色:

ul:hover > li { color: red;}ul > li:hover {  color: black;}
<ul>  <li>Element 1</li>  <li>Element 2</li>  <li>Element 3</li>  <li>Element 4</li></ul>
总结

以上是内存溢出为你收集整理的html – 在悬停元素时更改列表(ul)的所有其他元素li的css属性全部内容,希望文章能够帮你解决html – 在悬停元素时更改列表(ul)的所有其他元素li的css属性所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1086563.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-27
下一篇2022-05-27

发表评论

登录后才能评论

评论列表(0条)

    保存