鼠标移上去时，改变li元素的大小、背景色、文字颜色等
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
width: 130px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
position: relative;
margin-left: 10px;
}
div {
width: 150px;
height: 500px;
border: 1px dashed #000000;
text-align: center;
}
.active {
background-color: green;
color: #fff;
}
.show {
width: 2px;
height: 20px;
position: absolute;
left: 10px;
top: 15px;
background-color: white;
}
.li1 {
left: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li><span></span>雅望天堂1</li>
<li><span></span>雅望天堂2</li>
<li><span></span>雅望天堂3</li>
<li><span></span>雅望天堂4</li>
</ul>
</div>
<script type="text/javascript">
var oLi = document.getElementsByTagName("li");
var oSpan = document.getElementsByTagName("span");
for (var i = 0; i < oLi.length; i++) {
oLi[i].onmouseover = function() {
var sp = this.childNodes[0];
console.log(sp);
for (var i = 0; i < oLi.length; i++) {
oLi[i].setAttribute("class", "");
oSpan[i].setAttribute("class", "");
}
this.setAttribute("class", "active li1");
sp.setAttribute("class", "show");
}
oLi[i].onmouseout = function() {
for (var i = 0; i < oLi.length; i++) {
oLi[i].setAttribute("class", "");
}
}
}
</script>
</body>
</html>
这应该是你要的效果
博思aippt
2024-07-20 广告
