鼠标滑过，<li>背景怎么变色css怎么设置，或者js？
默认第一个<li>首页</li>有背景。当滑动到第二个<li>公司简介</li>时候，<li>公司简介</li>显示背景的同时<li>首页</li>不显示背景。如图。
很简单不用Js，也不用大量代码，关键是样式 里加一句就行：
li:hover {background:#4949d2; border-radius: 8px;}
温馨提示：答案为网友推荐，仅供参考
第1个回答 2020-03-01
<html>
<style>
li {float:left;margin-right:25px;padding:5px}
.active {background-color:red}
.hover {background-color:blue;color:white}
.normal {background-color:white;color:black}
</style>
<body>
<ul id="navbar">
<li class="active" id="first">首页</li>
<li id="second">二页</li>
<li id="third">三页</li>
</ul>
<script type="text/javascript">
var navbar=document.getElementById("navbar");
var items=navbar.getElementsByTagName("li");
var curactiveitem="first";
for(i=0;i<items.length;i++){
items[i].onmouseover=onhover;
items[i].onclick=onactive;
}
function onhover(){
for(i=0;i<items.length;i++){
if(items[i].id!=curactiveitem){
items[i].className="normal";
}
}
if(this.id!=curactiveitem){this.className="hover";}
}
function onactive(){
document.getElementById(curactiveitem).className="normal";
this.className="active";
curactiveitem=this.id;
}
</script>
</body>
</html>
<style>
li {float:left;margin-right:25px;padding:5px}
.active {background-color:red}
.hover {background-color:blue;color:white}
.normal {background-color:white;color:black}
</style>
<body>
<ul id="navbar">
<li class="active" id="first">首页</li>
<li id="second">二页</li>
<li id="third">三页</li>
</ul>
<script type="text/javascript">
var navbar=document.getElementById("navbar");
var items=navbar.getElementsByTagName("li");
var curactiveitem="first";
for(i=0;i<items.length;i++){
items[i].onmouseover=onhover;
items[i].onclick=onactive;
}
function onhover(){
for(i=0;i<items.length;i++){
if(items[i].id!=curactiveitem){
items[i].className="normal";
}
}
if(this.id!=curactiveitem){this.className="hover";}
}
function onactive(){
document.getElementById(curactiveitem).className="normal";
this.className="active";
curactiveitem=this.id;
}
</script>
</body>
</html>
相似回答