CSS——輪播圖中的箭頭
阿新 • • 發佈:2017-11-29
輪播 arr one png color meta margin ack tex
註意事項:
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——輪播圖中的箭頭