您的位置：首页 > 其它

鼠标经过的图片高亮显示，其余变暗效果[xyytit]

2013-12-10 17:40 309 查看

初始代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wb="http://open.weibo.com/wb"><head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("div").hover(
function (oEvent) {
$("div").css("opacity", "0.45");
//第一个函数相当于mouseover事件监听
$(oEvent.target).css("opacity", "0");

},
function (oEvent) {
//第二个函数相当于mouseout事件监听
$("div").css("opacity", "0");
}
);
});
</script>
<style type="text/css">
.float-panel{width:980px;}
.float-panel li a img {
float: left;
}
.mask-layer {
background: #000;
filter: alpha(opacity=0);
opacity: 0;
cursor: pointer;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: opacity .2s linear;
-webkit-transition: opacity .2s linear;
-moz-transition: opacity .2s linear;
}
.float-panel li a {
position: relative;
display: block;
zoom: 1;
overflow: hidden;
}
li{float:left;list-style:none;}
</style>
</head>
<body>
<ul class="float-panel" >
<li>
<a href="#" target="_blank">
<img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B1.jpg">
<div class="mask-layer" style="opacity: 0;"></div>
</a>
</li>
<li>
<a href="#" target="_blank">
<img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B2.jpg">
<div class="mask-layer" style="opacity: 0;"></div>
</a>
</li>
<li>
<a href="#" target="_blank">
<img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B3.jpg">
<div class="mask-layer" style="opacity: 0;"></div>
</a>
</li>
<li>
<a href="#" target="_blank">
<img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B4.jpg">
<div class="mask-layer" style="opacity: 0;"></div>
</a>
</li>
<li>
<a href="#" target="_blank">
<img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B5.jpg">
<div class="mask-layer" style="opacity: 0;"></div>
</a>
</li>
</ul>
</body></html>

简易代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wb="http://open.weibo.com/wb"><head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".float-panel div").hover(
function (oEvent) {
$(".float-panel div").css("opacity", "0.45");
//第一个函数相当于mouseover事件监听
$(oEvent.target).css("opacity", "0");
},
function (oEvent) {
//第二个函数相当于mouseout事件监听
$(".float-panel div").css("opacity", "0");
}
);
});
</script>
<style type="text/css">
.float-panel{width:980px;}
.mask-layer{
background: #000;
filter: alpha(opacity=0);
opacity: 0;
cursor: pointer;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: opacity .2s linear;
-webkit-transition: opacity .2s linear;
-moz-transition: opacity .2s linear;
}
.float-panel a {
position: relative;
display: block;
zoom: 1;
overflow: hidden;
float:left;
}
</style>
</head>
<body>
<div class="float-panel" >
<a href="#" target="_blank">
<img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B1.jpg">
<div class="mask-layer" style="opacity: 0;"></div>
</a>
<a href="#" target="_blank">
<img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B2.jpg">
<div class="mask-layer" style="opacity: 0;"></div>
</a>
<a href="#" target="_blank">
<img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B3.jpg">
<div class="mask-layer" style="opacity: 0;"></div>
</a>
<a href="#" target="_blank">
<img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B4.jpg">
<div class="mask-layer" style="opacity: 0;"></div>
</a>
<a href="#" target="_blank">
<img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B5.jpg">
<div class="mask-layer" style="opacity: 0;"></div>
</a>
</div>
</body></html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航