在用jQuery对页面ul下的li进行mouseover和mouseleave设置背景颜色和透明度的设置时，发现当mouseleave时，本身在li里面的字体颜色变淡了。
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>my test</title>
<script type="text/javascript" src="jquery-2.0.0.js"></script>
<script type="text/javascript" src="jquery-2.0.0.min.js"></script>
<style>
li{
list-style: none;
}
div.top{
position:relative;
width: 1160px;
height: 70px;
margin: 0 auto;
border-bottom: 0.5px solid lightgray;
z-index: 90000;
}
ul.top-center{
position: relative;
margin-left: 20px;
}
ul.top-center li{
height: 70px;
width: 70px;
position: relative;
line-height: 400%;
text-align: center;
}
div.top ul li{
float: left;
}
div.top ul li a{
color: red;
font-size:23px;
text-decoration: none;
}
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".bg1").mouseover(function(){
this.style.background="gray";
this.style.opacity="0.3";
});
$(".bg1").mouseleave(function(){
this.style.background="none";
this.style.opacity="none";
});
});
</script>
</head>
<body>
<div class="top">
<ul class="top-center">
<li class="bg1"><a href="#">首页</a></li>
<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>
</div>
<body>
</html>
看到，当鼠标移出时，本该恢复原来样式的却变淡了:div设置opacity属性会导致内部文字也透明。
是因为opacity会影响子类元素的背景颜色及透明度
所找到的解决方法：1.设置两个div，将背景颜色改变所在的div与文字所在的div分开，重叠后，背景的改变便不会影响字体的颜色
<body>
<div class="top">
<ul class="top-center">
<li class="bg1"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="on">
<ul class="on1">
<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>
<li><a href="#">夹袄</a></li>
</ul>
</div>
<body>
2.对背景设置rgba(x1,x2,x3,y),避免了子类对opacity的继承：
background="rgba(1,1,1,0.3)";