lang='less'
.div1,.div2,.div3{
position: absolute;
}
.div1 {
z-index: 900
}
.div2{
z-index: 889;
}
.div3 {
z-index: 887;
}
.div2:hover{
z-index: 902; //div2在顶层,(有效)
}
.div3:hover{
z-index: 902; //div3在顶层(有效)
}
// 下面这句无效
.div3:hover+.div2{
z-index: 901; // 同时div2在次顶层(无效)
}
// 这样也不行
.div3:hover .div2{
z-index: 901; // div2在次顶层
}
分享
关注你看一下，用.div3.div2 或者 .div3+.div2都行，关键是在html部分，要把div2放div3下面！ .div2）只能选择与自己紧紧相连的身后的一个兄弟
第一种：+ 相邻兄弟选择器（.div3
第二种：~ 通用兄弟选择器（.div3~ .div2 ）只可以选择在自己身后的所有类名是.div2小弟
关键就在于只能改变自身元素后面的元素样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
}
.div1,
.div2,
.div3 {
position: absolute;
}
.div1 {
left: 0;
top: 0;
background: red;
z-index: 900;
}
.div2 {
background: blue;
z-index: 889;
left: 10px;
top: 10px;
}
.div3 {
background: #CCCCCC;
z-index: 887;
left: 20px;
top: 20px;
}
.div2:hover {
z-index: 902;
}
.div3:hover{
z-index: 903;
}
/* .div3:hover~.div2 {
z-index: 902;
} */
.div3:hover+.div2 {
z-index: 902;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div3"></div>
<div class="div2"></div>
</body>
</html>
系统已结题
12月15日
已采纳回答
12月7日
创建了问题
12月5日
