html⿏标悬停光标改变,CSS实现⿏标悬停改变其他标签样式的
⽰例代码
前⾔：
据我了解⽬前CSS只能控制悬停时改变该标签下⾯的兄弟标签和⼦标签样式，如有⼤佬有好的⽅法请指教！
控制其他标签(根据控制标签与被控制标签之间的关系)可分为三种类型如下：
本⽂中控制标签为 .div1
被控制标签为 .div2
1.控制⼦标签(.div1:hover和.div2之间使⽤空格)
.div1,.div2 {
width: 200px;
height: 100px;
background-color: pink;
}
.div2 {
background-color: aqua;
display: none;
}
.div1:hover .div2 {
display: block;
}
div1
div3
div2
被控制标签只要是控制标签的⼦标签就可以，⾥有其他标签(如.div3)不会影响效果！
2.控制兄弟标签(.div1:hover和.div2之间使⽤+)
.div1,.div2 {
width: 200px;
height: 100px;
background-color: pink;
}
.div2 {
background-color: aqua;
css鼠标点击样式
display: none;
}
.div1:hover+.div2 {
display: block;
}
div1
div2
使⽤“+”时，.div2必须紧贴在.div屁股后⾯才会有效果，否则⽆效例如：将.div3取消注释后，.div1将⽆法控制.div2的样式如果控制标签和被控制标签中间有内容，需要按照第三种⽅式写！
3.控制兄弟标签(中间有内容)(.div1:hover和.div2之间使⽤~)
.div1,.div2 {
width: 200px;
height: 100px;
background-color: pink;
}
.div2 {
background-color: aqua;
display: none;
}
.div1:hover~.div2 {
display: block;
}
div1
div3
div2
这种⽅法的使⽤要求是被控制标签必须在控制标签的下⾯，中间可以有任意内容。
总结：
控制⼦标签
中间使⽤空格
控制紧贴后⾯的兄弟标签
中间使⽤“+”
控制后⾯任意兄弟标签
中间使⽤“~”
到此这篇关于CSS实现⿏标悬停改变其他标签样式的⽰例代码的⽂章就介绍到这了，更多相关css⿏标悬停改变样式内容请搜索脚本之家以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持脚本之家！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。