注意事项：
1、定位中left权重比right高，top权重比bottom高
2、两个span标签嵌套在一个盒子中，将来显示隐藏只需要控制父盒子就行了
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????.box { ???????????width: 400px; ???????????height: 300px; ???????????border: 1px solid #ccc; ???????????margin: 150px auto; ???????????position: relative; ???????} ???????.arrow { ???????????display: none; ???????} ???????span { ???????????position: absolute; ???????????top: 50%; ???????????margin-top: -40px; ???????????width: 30px; ???????????height: 80px; ???????????text-align: center; ???????????line-height: 80px; ???????????font-size: 40px; ???????????background: rgba(255, 198, 93, 0.3); ???????} ???????.left{ ???????????left: 0px; ???????????border-radius: 0 10px 10px 0; ???????} ???????.right { ???????????right: 0px; ???????????border-radius: 10px 0 0 10px; ???????} ???</style></head><body><div class="box"> ???<div class="arrow"> ???????<span class="left"><</span> ???????<span class="right">></span> ???</div></div><script> ???var divEle = document.getElementsByTagName("div")[0]; ???var arrEle = document.getElementsByTagName("div")[1]; ???divEle.onmouseover = function () { ???????arrEle.style.display = "block"; ???} ???divEle.onmouseout = function () { ???????arrEle.style.display = "none"; ???}</script></body></html>CSS——轮播图中的箭头
原文地址：http://www.cnblogs.com/wuqiuxue/p/7920009.html