这个要如何实现
浏览 1218回答 1
1回答
-
stone310
测试下是这种效果吗<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> li { float: left; list-style-type: none; width: 100px; height: 40px; text-align: center; position: relative; } .point { border-bottom: 5px solid orange; } .point:after { content: ""; border-bottom: 10px solid orange; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; top: 30px; left: 40px; } </style> </head> <body> <ul> <li class="point">首页</li> <li>内容</li> <li>联系我们</li> </ul> <script> var li = document.getElementsByTagName("li"); for (var i = 0; i < li.length; i++) { li[i].onmouseover = function () { for (var i = 0; i < li.length; i++) { li[i].className = ""; } this.className = "point"; } } </script> </body> </html>10