当设置li下面的小三角时，为什么鼠标移动（onmouseover）时，小三角不随之变动？
可能是因为小三角的定位没有设置，即小三角应该是绝对定位，小三角的父元素li应该是相对定位（子绝父相）。
下面展示的是tab栏切换时小下标随之变动的效果
<head>
<title>tab栏导航切换</title>
<style>
ul li{
width:42px;
height:42px;
list-style:none;
position: relative;
font-size: 14px;
color:#999;
float:left;
display: block;
}
.triangle{
width:0px;
height:0px;
border: 7px solid red;
top:20px;
left:7px;
position: absolute;
display:none;
}
</style>
</head>
<body>
<ul>
<li>
北京
<div class="triangle"></div>
</li>
<li>
广州
<div class="triangle"></div>
</li>
<li>
重庆
<div class="triangle"></div>
</li>
</ul>
</body>
<script>
var tabLi = document.getElementsByTagName('li');
var triangle = document.getElementsByClassName('triangle');
triangle[0].style.display = 'block'; //初始化(默认在第一个位置)
for (let i = 0; i < tabLi.length; i++) {
tabLi[i].onmouseover = function(){
for (var j = 0; j < tabLi.length; j++) {
triangle[j].style.display = 'none';
}
triangle[i].style.display = 'block';
}
}
</script>
</html>
6604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
