悬停在任何元素上时,如何使用CSS3选择器选择所有同级元素?

杰伊德夫

考虑以下给定的HTML。

<ul class="chars_container">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS:

.chars_container{
    list-style-type: none
}

.chars_container li{
    float : left ;
    margin: 20px ;
    font-size : 50px;
    color : #f00;
}

.chars_container li:hover ~ li{
       color : #0f0; 
}

悬停在任何“ li”上时,我想更改所有同级“ li”的颜色属性。我正在使用〜选择器,该选择器仅选择下一个所有兄弟姐妹。

请访问此小提琴以获取相同的代码。

4dgaurav

如果你想拥有类似的东西 Demo

的CSS

.chars_container:hover > li{
       color : #0f0; 
}
.chars_container li:hover {
       color : #f00; 
}

或者

.chars_container:hover li{
       color : #0f0; 
}
.chars_container li:hover {
       color : #f00; 
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

仅限CSS-当:hover悬停在任何同级上时,使第一个元素改变颜色

来自分类Dev

仅限CSS-当:hover悬停在任何同级上时,使第一个元素改变颜色

来自分类Dev

使用CSS3 not选择器仅选择不是特定元素的子元素的元素

来自分类Dev

如果将鼠标悬停在某个元素上,如何在jQuery中选择所有包含并包含它的同级元素?

来自分类Dev

同级中元素的CSS选择器

来自分类Dev

将鼠标悬停在具有同级选择器的文本上

来自分类Dev

CSS选择器-选择其父项与特定元素具有同级元素的元素

来自分类Dev

css3选择器问题:悬停效果另一个元素

来自分类Dev

如何使用父div内的CSS选择器定位所有元素1,2,3,4 ...... n

来自分类Dev

如何使用CSS 2.0选择器通过在父元素上设置的属性来选择元素?

来自分类Dev

如何使用悬停选择器显示“叔叔”元素

来自分类Dev

如何阻止CSS选择器选择所有子元素

来自分类Dev

如何阻止CSS选择器选择所有子元素

来自分类Dev

仅使用CSS3即可将元素的样式悬停在其子元素上

来自分类Dev

CSS选择器,用于单独的同级元素组

来自分类Dev

使用CSS3选择除第一个元素外的所有元素

来自分类Dev

如何使用CSS2选择器在元素的第n个子元素上添加:hover?

来自分类Dev

如何使用CSS2选择器在元素的第n个子元素上添加:hover?

来自分类Dev

通过CSS选择器选择两个已知元素之间的所有元素

来自分类Dev

css选择器选择页面中存在特定元素的所有元素

来自分类Dev

CSS不是选择器:选择除元素内部的所有元素

来自分类Dev

CSS3中的差异:悬停选择器

来自分类Dev

如何在css3中选择具有等于红色的属性的任何元素?

来自分类Dev

CSS选择器-选择所有同级直到某个同级

来自分类Dev

如何通过硒使用CSS选择器查找元素

来自分类Dev

CSS同级(〜)选择器无法在选中的属性上使用

来自分类Dev

Webdriver / Selenium:当元素没有类名,ID或CSS选择器时如何查找?

来自分类Dev

当前元素之前和之后具有SAME CLASS的所有元素的CSS选择器

来自分类Dev

用CSS放置的元素:选择器开始隐藏在CSS3动画中

Related 相关文章

  1. 1

    仅限CSS-当:hover悬停在任何同级上时,使第一个元素改变颜色

  2. 2

    仅限CSS-当:hover悬停在任何同级上时,使第一个元素改变颜色

  3. 3

    使用CSS3 not选择器仅选择不是特定元素的子元素的元素

  4. 4

    如果将鼠标悬停在某个元素上,如何在jQuery中选择所有包含并包含它的同级元素?

  5. 5

    同级中元素的CSS选择器

  6. 6

    将鼠标悬停在具有同级选择器的文本上

  7. 7

    CSS选择器-选择其父项与特定元素具有同级元素的元素

  8. 8

    css3选择器问题:悬停效果另一个元素

  9. 9

    如何使用父div内的CSS选择器定位所有元素1,2,3,4 ...... n

  10. 10

    如何使用CSS 2.0选择器通过在父元素上设置的属性来选择元素?

  11. 11

    如何使用悬停选择器显示“叔叔”元素

  12. 12

    如何阻止CSS选择器选择所有子元素

  13. 13

    如何阻止CSS选择器选择所有子元素

  14. 14

    仅使用CSS3即可将元素的样式悬停在其子元素上

  15. 15

    CSS选择器,用于单独的同级元素组

  16. 16

    使用CSS3选择除第一个元素外的所有元素

  17. 17

    如何使用CSS2选择器在元素的第n个子元素上添加:hover?

  18. 18

    如何使用CSS2选择器在元素的第n个子元素上添加:hover?

  19. 19

    通过CSS选择器选择两个已知元素之间的所有元素

  20. 20

    css选择器选择页面中存在特定元素的所有元素

  21. 21

    CSS不是选择器:选择除元素内部的所有元素

  22. 22

    CSS3中的差异:悬停选择器

  23. 23

    如何在css3中选择具有等于红色的属性的任何元素?

  24. 24

    CSS选择器-选择所有同级直到某个同级

  25. 25

    如何通过硒使用CSS选择器查找元素

  26. 26

    CSS同级(〜)选择器无法在选中的属性上使用

  27. 27

    Webdriver / Selenium:当元素没有类名,ID或CSS选择器时如何查找?

  28. 28

    当前元素之前和之后具有SAME CLASS的所有元素的CSS选择器

  29. 29

    用CSS放置的元素:选择器开始隐藏在CSS3动画中

热门标签

归档