1 回答
已采纳
stone310
TA贡献361条经验 获得超191个赞
测试下是这种效果吗
<!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>- 1 回答
- 0 关注
- 1217 浏览
添加回答
举报
0/150
提交
取消