jQuery实现鼠标滑过遮罩并高亮显示效果
更新时间：2013年07月16日 18:03:46 作者：
本文为大家详细介绍下使用jQuery实现鼠标滑过遮罩高亮显示效果，想必这种效果在网上大家都有见到过，下面是具体的示例，感兴趣的各位可以参考下哈，希望对大家有所帮助
复制代码 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标滑过遮罩高亮效果</title>
<style>
*{padding:0;margin:0;}
ul,li{list-style:none;}
.picshow{float:left;padding:4px 0;width:760px;position:relative;}
.picshow li{float:left;height:160px;width:190px;background:http://www.875.cn/000;opacity:0.9;}
.picshow li img{height:160px;width:190px;}
.picshow li a{display:block;}
</style>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
$(function() {
var conAry = $("[name=h_light]");
conAry.each(function(){
var $this = $(this);
var els = $("a", $this);
els.each(function(){
var el = $(this);
el.mouseover(function() {
els.css({ "opacity": 0.6});
el.animate({ "opacity": 0.9 });
});
});
$this.mouseout(function() {
els.css("opacity", 1);
});
});
});
</script>
</head>
<body>
<ul class="picshow" name="h_light">
<li><a href="http://www.875.cn/" target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li>
<li><a href="http://www.875.cn/" target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li>
<li><a href="http://www.875.cn/" target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li>
<li><a href="http://www.875.cn/" target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li>
<li><a href="http://www.875.cn/" target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li>
<li><a href="http://www.875.cn/" target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li>
<li><a href="http://www.875.cn/" target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li>
<li><a href="http://www.875.cn/" target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li>
</ul>
</body>
</html>
效果图如下：
相关文章
这篇文章主要介绍了jQuery中height()方法用法,以实例形式较为详细分析了height()方法返回元素高度的用法与相关注意事项,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
jQuery中document与window以及load与ready 区别详解
这篇文章主要介绍了jQuery中document与window以及load与ready 区别详解,需要的朋友可以参考下2014-12-12
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
这篇文章主要为大家详细介绍了解决jQuery上传插件Uploadify出现Http Error 302错误的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
本文给大家分享的是使用jQuery结合CSS3制作的仿猎豹浏览器宽屏banner焦点图特效，代码很简单，效果却非常棒，而且兼容各大浏览器，这里推荐给大家，有需要的小伙伴参考下。2015-03-03
这篇文章主要为大家详细介绍了jQuery事件用法，具有一定的参考价值，感兴趣的朋友可以参考一下2016-10-10
同事在网上的找的下拉列表框出现位置不对的和加载慢的BUG，反正多选下拉列表框实现也很简单，与其看那些结构混乱的代码，不如自己重新实现一个2012-07-07
这篇文章主要介绍了jQuery 表单事件与遍历详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
在群里看见有人贴出一个页面问opacity不支持IE6，有什么好的支持方法没。贴出第一眼就发现用了jq库，当场就想到了支持的。 但很多人回答用CSS滤镜，当我看到这个答案的时候。有些很吃惊。难道大家都不知道JQ是支持opacity兼容IE6+的吗？ 开始他们都不相信。JQ怎么配合使用。于是就写了一个简单的代码给他们。2013-03-03
今天看到一个网站的公告栏一个小效果，如果有2条公告或以上就有个滚动效果，特整理下分享给大家2012-05-05
有关easyui-layout中的收缩层无法显示标题的解决办法
本文由脚本之家小编给大家介绍有关easyui-layout中的收缩层无法显示标题的原因分析及解决办法，感兴趣的朋友可以参考下2016-05-05
最新评论