我是打算鼠标放在【卖家中心】上就会显示下面的子菜单,鼠标滑到哪个子菜单上,背景变灰色。第一次鼠标移入移出没有问题,但第二次问题来了。如果我上次放在【免费开店】上,然后移出,子菜单收回只剩下卖家中心,鼠标移到卖家中心上,子菜单展开,但不知道怎么搞的它默认【免费开店】背景色就是灰的,我不知道该怎么解决,求朋友们帮我看看
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>淘宝卖家中心</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
.ulouter {
width: 110px;
margin: 150px auto;
}
.liouter {
height: 30px;
overflow: hidden;
}
.show {
overflow: visible;
}
.seller {
line-height: 30px;
}
.liinner li {
height: 28px;
line-height: 28px;
}
.bgcGray {
background-color: #F5F5F5;
}
.bgcWhite {
background-color: #fff;
}
.colOrange {
color: orange;
}
</style>
<script>
window.onload = function () {
var liOuter = document.getElementById("liouter");
var liInner = document.getElementById("liinner");
var seller = document.getElementById("seller");
var arrLi = liInner.getElementsByTagName("li");
liOuter.onmouseover = function () {
liOuter.className = "liouter show";
seller.className = "seller colOrange"
}
liOuter.onmouseout = function () {
liOuter.className = "liouter";
seller.className = "seller"
}
for(i=0;i<arrLi.length;i++){
arrLi[i].onmouseover = function () {
for(j=0;j<arrLi.length;j++){
arrLi[j].className = "bgcWhite";
}
this.className = "bgcGray";
}
}
}
</script>
</head>
<body>
<ul class="ulouter">
<li class="liouter" id="liouter"><a href="#" class="seller" id="seller">卖家中心</a>
<ul class="liinner" id="liinner">
<li><a href="#">免费开店</a></li>
<li><a href="#">已卖出的宝贝</a></li>
<li><a href="#">出售中的宝贝</a></li>
<li><a href="#">卖家服务市场</a></li>
<li><a href="#">卖家培训中心</a></li>
</ul>
</li>
</ul>
</body>
</html>
您好啊,按照我的理解,也看了你的代码,你的意思是不是希望如果鼠标经过卖家中心,显示出来的内层li如果有鼠标经过的li,则显示背景为灰色,如果鼠标移走,然后再放在卖家中心上的时候,你希望的是第一个免费开店是默认的灰色,而不是其他的(或者上次被鼠标经过的li)为灰色,如果我理解的没有错的话,你需要在liOuter.onmouseout = function () 这个方法上增加一个给其他都设置成白色,而把免费开店设置成灰色。也就是在你的代码基础上增加一个
liOuter.onmouseout = function () {
liOuter.className = "liouter";
seller.className = "seller";
arrLi[0].className = "bgcGray";
for(j=1;j<arrLi.length;j++){
arrLi[j].className = "bgcWhite";
}
}
重新整理下了思路,问题解决了,语言还是不好描述,直接贴代码吧
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>淘宝卖家中心</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
.ulouter {
width: 110px;
margin: 50px auto;
}
.liouter {
height: 30px;
overflow: hidden;
}
.seller-center {
line-height: 30px;
}
.liinner {
line-height: 28px;
}
.show {
overflow: visible;
}
.bgcGray {
background-color: #F5F5F5;
}
.bgcWhite {
background-color: #fff;
}
.colOrange {
color: orange;
}
</style>
<script>
window.onload = function () {
var liOuter = document.getElementById("liouter");
var sellerCenter = document.getElementById("seller-center");
var arrLi = document.getElementsByClassName("liinner");
liOuter.onmouseover = function () {
liOuter.className += " show";
sellerCenter.className += " colOrange";
}
liOuter.onmouseout = function () {
liOuter.className = "liouter";
sellerCenter.className = "seller-center";
for(k=0;k<arrLi.length;k++){
arrLi[k].className = "liinner bgcWhite";
}
}
for(i=0;i<arrLi.length;i++){
arrLi[i].onmouseover = function () {
// alert(1);
for(j=0;j<arrLi.length;j++){
arrLi[j].className += " bgcWhite";
}
this.className = "liinner bgcGray";
}
}
}
</script>
</head>
<body>
<ul class="ulouter">
<li class="liouter" id="liouter"><a href="#" class="seller-center" id="seller-center">卖家中心</a>
<ul>
<li class="liinner"><a href="#">免费开店</a></li>
<li class="liinner"><a href="#">已卖出的宝贝</a></li>
<li class="liinner"><a href="#">出售中的宝贝</a></li>
<li class="liinner"><a href="#">卖家服务市场</a></li>
<li class="liinner"><a href="#">卖家培训中心</a></li>
</ul>
</li>
</ul>
</body>
</html>
你只要在鼠标移开卖家中心的时候,清空onmouseover的子菜单背景灰就可以了。
liOuter.onmouseout = function () {
liOuter.className = "liouter";
seller.className = "seller"
for(j=0;j<arrLi.length;j++) {
if(arrLi[j].className === "bgcGray") {
arrLi[j].className = "bgcWhite";
break;
}
}
}