jQuery对li设置背景颜色和透明度

在用jQuery对页面ul下的li进行mouseover和mouseleave设置背景颜色和透明度的设置时，发现当mouseleave时，本身在li里面的字体颜色变淡了。

代码如下：

 
 
 
   

 

       
• 首页

       
• 午后

       
• 自驾

       
• 混

       
• 晚饭

       
• 夹袄

        
   

看到，当鼠标移出时，本该恢复原来样式的却变淡了:div设置opacity属性会导致内部文字也透明。
 

是因为opacity会影响子类元素的背景颜色及透明度

所找到的解决方法：1.设置两个div，将背景颜色改变所在的div与文字所在的div分开，重叠后，背景的改变便不会影响字体的颜色

 

 

       

       

       

       

       

       

        
   

 

       
• 首页

       
• 午后

       
• 自驾

       
• 混

       
• 晚饭

       
• 夹袄

        
   

2.对背景设置rgba(x1,x2,x3,y),避免了子类对opacity的继承：

background="rgba(1,1,1,0.3)";