這個要如何實現
木漁人R3435218
2016-10-26 10:19:31
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 關注
- 1255 瀏覽
添加回答
舉報
0/150
提交
取消