为什么不可以显示箭头？
<style>
*{margin:0px;
padding:0px;
text-decoration:0px;}
#container{width:1920px;
height:520px;
overflow:hidden;
position:relative;}
#list{z-index:1;
position:absolute;
width:13760px;
height:520px;}
#buttons{z-index:2;
position:absolute;
width:150px;
height:20px;
left:878px;
bottom:12px;}
#buttons span{cursor:pointer;
width:5px;
height:5px;
border-radius:100px;;
float:left;
border:2px solid #FFF;
margin:8px;}
#buttons .on{background:#6C6C6C;}
.arrow{cursor:pointer;
width:50px;
height:50px;
position:absolute;
top:180px;
z-index:2;
color:#FFF;
background:"black";
font-size:20px;
font-weight:10px;
}
#container:hover .arrow{display:block;
}
#pre{left:10px;
}
#next{right:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left:-1920px;">
<img src="images/6.png" />
<img src="images/1.png" />
<img src="images/2.png" />
<img src="images/3.png"/>
<img src="images/4.png"/>
<img src="images/5.png" />
<img src="images/6.png" />
<img src="images/1.png" />
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
<span index="6"></span>
<a href="#" class="arrow" id="pre"> </a>
<a href="#" class="arrow" id="next"> </a>
</div>
</div>
</body>
</html>
CHIEMINCHAN1回答
-
业余奶茶品鉴师
html 部分代码改为：<div id="container"> <div id="list" style="left:-1920px;"> <img src="1.jpg" /> <img src="2.jpg" /> </div> <div id="buttons"> <span index="1" class="on"></span> <span index="2"></span> </div> <a href="#" class="arrow" id="pre"> </a> <a href="#" class="arrow" id="next"> </a> </div>望采纳
随时随地看视频慕课网APP
相关分类
JavaScript