极客观点
项目管理
HarmonyOS
这里
html文件如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Carousel</title>
<link rel="stylesheet" href="css/layout.css" />
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="content-wrap">
<input type="radio" name="slider" id="slider1" checked="checked"/>
<input type="radio" name="slider" id="slider2"/>
<input type="radio" name="slider" id="slider3"/>
<input type="radio" name="slider" id="slider4"/>
<div class="slide_bd">
<ul class="ce">
<li><img src="img/001.jpg" alt="" /></li>
<li><img src="img/002.jpg" alt="" /></li>
<li><img src="img/003.jpg" alt="" /></li>
<li><img src="img/004.jpg" alt="" /></li>
</ul>
</div>
<div class="slide_label">
<label for="slider1"></label>
<label for="slider2"></label>
<label for="slider3"></label>
<label for="slider4"></label>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
css文件如下：
body{
padding: 0;
margin: 0;
}
.content-wrap{
position: relative;
width: 460px;
height: 350px;
margin: 0 auto;
overflow: hidden;
}
.slide_bd{
width: 100%;
height:100%;
overflow: hidden;
position:absolute;
}
.slide_bd .ce{
position:absolute;
left:0;top:0;
padding-left: 0;
width: 400%;
height: 100%;
list-style: none;
overflow: hidden;
-moz-transition: left .5s ease-out;
-webkit-transition: left .5s ease-out;
-ms-transition: left .5s ease-out;
-moz-transition: left .5s ease-out;
transition: left .5s ease-out;
}
.slide_bd .ce img{
width: 460px;
height: 350px;
}
.slide_bd .ce li{
float:left;
}
#slider1:checked~.slide_bd .ce{left:0;}
#slider2:checked~.slide_bd .ce{left:-100%;}
#slider3:checked~.slide_bd .ce{left:-200%;}
#slider4:checked~.slide_bd .ce{left:-300%;}
.slide_label{
position: absolute;
}
.slide_label label{
width: 13px;
height: 13px;
line-height:10px;
border-radius: 13px;
display:inline-block;
background:#999;
text-indent:-9999px;
}
.content-wrap input{
display: none;
}
.slide_label label:hover,#slider1:checked~.slide_label label:nth-child(1),#slider2:checked~.slide_label label:nth-child(2),#slider3:checked~.slide_label label:nth-child(3),#slider4:checked~.slide_label label:nth-child(4){
background: #f00;
cursor: pointer;
}
为什么当.slide_label{
position: absolute;
}
中的postion：为static时，label：hover会失效,鼠标也无法点击相关label。.slide_label使用float也会使label：hover失效。slide_label的postion为relative,fixed,absolute均可以使label：hover生效。
.slide_bd使用了position:absolute导致div脱离默认文档流，直接依附至body。.slide_label使用postion:static时，未脱离文档流。.slide_label使用float时，可理解为半脱离文档流，即位置离开默认文档流位置，但仍依附于原有父级。位于新文档流的
.slide_bd将覆盖于默认文档流之上，导致:hover被处于上层的.slide_bd触发，而无法由下层的.slide_label触发。.slide_label使用position:relative/fixed/absolute时，将脱离默认文档流。由于在html中的出现次序在.slide_bd之后，其z轴方向在.slide_bd之上，所以可以触发:hover。此外……
其实你本可以很方便的发现这一问题：
只要你把
ul.ce的外边距取消，我相信你一定可以一眼发现问题的所在。