HTML+css中⿏标经过触发等问题HTML+css中⿏标经过触发等问题
⿏标经过事件在样式中⽤hover来使⽤，hover在css中书写格式⼤致为
选择器:hover {}
选择器1:hover 选择器 2{}
选择器:hover {}
这个格式的含义⼤致为：当⿏标经过选择器时将{}⾥⾯的样式表现于选择器
选择器1:hover 选择器2 {}
这个格式的含义⼤致为：当⿏标经过**选择器1**时将{}⾥⾯的样式表现于 **选择器2**
注意：选择器1:hover 选择器2 {}
在使⽤这⼀格式时需注意：
选择器1必须包含选择器2 且 选择器1为⽗级 选择器2为⼦级，这样才能实现其功能，例：
/
* ⼦⽗级：.box1>.box2 */
.box1{
width: 100px;
height: 100px;
background-color: red;
padding: 50px;
margin-bottom: 30px;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
}
.box1:hover{
background-color: blue;
}
.box1:hover .box2{
background-color: red;
css鼠标点击样式
}
<div class="box1">
<div class="box2"></div>
</div>
效果如下（⿏标经过之前）： （本⽂章效果图中淡绿⾊皆为body背景⾊）
效果如下（⿏标经过之后）：
⼏种错误的关系及其效果
选择器1包含选择器2，但选择器1为⼦级 选择器⼆为⽗级，代码及效果如下：
/* ⼦⽗级：.box3<box4 */
.box3{
width: 100px;
height: 100px;
background-color: green;
}
.box4{
width: 100px;
height: 100px;
padding: 50px;
background-color: skyblue;
}
.box3:hover{
background-color: blue;
}
.box3:hover .box4{
background-color: red;
}
<div class="box4">
<div class="box3"></div>
</div>
⿏标经过之前：
⿏标经过之后：
选择器1与选择器2为并列（兄弟级），代码及效果如下：
/* 兄弟级  .box5=.box6 */
.
box5{
width: 100px;
height: 100px;
background-color: #fdc;
padding: 50px;
}
.box6{
width: 100px;
height: 100px;
background-color: #bde;
}
.
box5:hover{
background-color: blue;
}
.box5:hover .box6{
background-color: red;
}
<div class="box5"></div>
<div class="box6"></div>
⿏标经过之前：
⿏标经过之后：
hover也可在并列选择器中的使⽤，其格式为
选择器1:hover [选择器2]，选择器3:hover [选择器4]，······ {}      （[  ]表⽰⾥⾯的值可以没有）
因本⼈⽔平有限，hover只能想到这些，如有不⾜谅解，⽂章中如有错误还请指正、见谅！

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