当鼠标移入的时候，里面的文字和背景颜色均发生改变，通过js的类名控制该结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
list-style: none;
}
ul{
width: 100px;
height: 200px;
margin: 100px auto;
}
ul li{
width: 100px;
height: 30px;
margin-bottom: 5px;
background-color: skyblue;
}
ul li span{
display: none;
}
ul .ac{
background-color: pink;
}
ul .ac em{
display: none;
}
ul .ac span{
display: inline;
}
</style>
</head>
<body>
<ul>
<li><em>一楼</em><span>美妆</span></li>
<li><em>二楼</em><span>超市</span></li>
<li><em>三楼</em><span>家电</span></li>
<li><em>四楼</em><span>服装</span></li>
<li><em>五楼</em><span>电影</span></li>
<li><em>六楼</em><span>美食</span></li>
</ul>
<script>
var liList=document.querySelectorAll('li');
for(var i=0;i<liList.length;i++){
liList[i].onmouseenter=function(){
this.className='ac';
}
liList[i].onmouseleave=function(){
this.className='';
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号