首页 > 网页制作 > CSS

CSS实现鼠标悬停改变其他标签样式的示例代码

前言:

        据我了解目前CSS只能控制悬停时改变该标签下面的兄弟标签和子标签样式,如有大佬有好的方法请指教!
控制其他标签(根据控制标签与被控制标签之间的关系)可分为三种类型如下:

  • 本文中控制标签为 .div1
  • 被控制标签为 .div2

1.控制子标签(.div1:hover和.div2之间使用空格)



    
        
        
        
    
    
        
div1
div3
div2

被控制标签只要是控制标签的子标签就可以,里有其他标签(如.div3)不会影响效果!

2.控制兄弟标签(.div1:hover和.div2之间使用+)



    
        
        
        
    
    
        
div1
div2

使用“+”时,.div2必须紧贴在.div屁股后面才会有效果,否则无效!!!例如:将.div3取消注释后,.div1将无法控制.div2的样式!!!如果控制标签和被控制标签中间有内容,需要按照第三种方式写!

3.控制兄弟标签(中间有内容)(.div1:hover和.div2之间使用~)



    
        
        
        
    
    
        
div1
div3
div2

这种方法的使用要求是被控制标签必须在控制标签的下面,中间可以有任意内容。

总结:

控制子标签

中间使用空格

控制紧贴后面的兄弟标签

中间使用“+”

控制后面任意兄弟标签

中间使用“~”

到此这篇关于CSS实现鼠标悬停改变其他标签样式的示例代码的文章就介绍到这了,更多相关css鼠标悬停改变样式内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章,希望大家以后多多支持潘少俊衡!

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/CSS/73421.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持