jQuery对li设置背景颜色和透明度
来源:互联网 发布:iptables 禁用端口 编辑:程序博客网 时间:2024/05/17 02:19
在用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)";
- jQuery对li设置背景颜色和透明度
- html中如何设置背景和背景颜色的透明度
- div 背景颜色透明度设置
- 设置背景的颜色透明度
- 针对UI给出的背景颜色和透明度#ba9163 35%透明度该如何设置
- 关于div设置背景颜色透明度
- 关于div设置背景颜色透明度
- div css 背景颜色透明度设置
- backgroundColor的背景颜色alpha透明度设置
- 界面的背景颜色的透明度设置
- HTML背景颜色及透明度设置
- Android - 背景颜色透明度
- android TextView文字透明度和背景透明度设置
- android TextView文字透明度和背景透明度设置
- android TextView setTextSize, 设置背景透明度和字体透明度
- 设置TextView控件的背景透明度和字体透明度
- 如何设置TextView控件的背景透明度和字体透明度
- ANDROID设置TEXTVIEW控件的背景透明度和字体透明度
- 欢迎使用CSDN-markdown编辑器
- Java中getResourceAsStream的用法
- 将软件添加到右键菜单
- WIN10 删除文件 找不到该项目
- 当EditText编辑时 hint 在 6.0 手机上显示不出来。。。。
- jQuery对li设置背景颜色和透明度
- Vijos P1037 搭建双塔
- apk在应用市场上架时需要认领问题的原因和解决办法
- java正则的使用
- QML与C++交互
- HBase备份之导入导出
- Android中第三方框架【网络框架Volley】的使用【Application生命周期】【内存泄漏问题】
- mysql数据库常见语句
- 如何优化你的布局层级结构之RelativeLayout和LinearLayout及FrameLayout性能分析