极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点轮播图_1</title>
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
@font-face {
font-family: 'iconfont';
/* project id 282854 */
src: url("https://at.alicdn.com/t/font_t8a5fr2b6z7fzuxr.eot");
src: url("https://at.alicdn.com/t/font_t8a5fr2b6z7fzuxr.eot?#iefix") format("embedded-opentype"), url("https://at.alicdn.com/t/font_t8a5fr2b6z7fzuxr.woff") format("woff"), url("https://at.alicdn.com/t/font_t8a5fr2b6z7fzuxr.ttf") format("truetype"), url("https://at.alicdn.com/t/font_t8a5fr2b6z7fzuxr.svg#iconfont") format("svg"); }
.arrow {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale; }
* {
margin: 0;
padding: 0; }
#wapper {
width: 658px;
height: 370px;
margin: 30px auto;
/* border: 1px solid red;*/
overflow: hidden;
position: relative; }
#wapper #pic_list {
width: 4200px;
height: 370px; }
#wapper #pic_list img {
float: left; }
#wapper #button_list {
width: 140px;
height: 10px;
position: absolute;
bottom: 20px;
left: 280px; }
#wapper #button_list span {
cursor: pointer;
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #fff;
background-color: #333;
margin-right: 15px; }
#wapper #button_list .on {
background: orangered; }
#wapper .arrow {
cursor: pointer;
display: none;
line-height: 50px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 50px;
height: 50px;
position: absolute;
z-index: 2;
top: 180px;
background-color: rgba(0, 0, 0, 0.2);
color: #fff; }
#wapper #prev {
left: 20px; }
#wapper #next {
right: 20px; }
#wapper:hover .arrow {
display: block; }
#wapper .arrow:hover {
background-color: rgba(0, 0, 0, 0.7); }
</style>
</head>
<body>
<div id="wapper">
<div id="pic_list">
<img src="images/1.jpg" alt="1"/>
<img src="images/1.jpg" alt="1">
<img src="images/2.jpg" alt="2">
<img src="images/3.jpg" alt="3">
<img src="images/4.jpg" alt="4">
<img src="images/5.jpg" alt="5">
<img src="images/1.jpg" alt="5"/>
</div>
<div id="button_list">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<i id="prev" class="arrow"></i>
<i id="next" class="arrow"></i>
</div>
</body>
</html>当我设置
#wapper:hover .arrow {
display: block; }
.arrow:hover {
background-color: rgba(0, 0, 0, 0.7); }arrow是没有hover反应的，只有改成
#wapper .arrow:hover {
background-color: rgba(0, 0, 0, 0.7); }
才可以，请问是为什么呢
这是个优先级问题
本来就有个背景颜色
而.arrow:hover 优先级不够 #wapper .arrow 高
#wapper .arrow:hover 则可以