鼠标经过图片时，其它区域变暗，图片“高亮”显示

发布时间：2018-08-17 19:09:06 所属栏目：专访来源：站长网

导读：jQuery 实现的一个小特效，当鼠标经过图片时，其它区域自动变暗，看上去图片高亮显示了，其实鼠标所在的图片并没有加亮，而其它区域变暗给它带来的高亮显示感觉，给其以突出的感觉，对于网站的用户体验还是非常不错的，推荐大家使用。为解决一些网页特效

　　jQuery实现的一个小特效，当鼠标经过图片时，其它区域自动变暗，看上去图片“高亮”显示了，其实鼠标所在的图片并没有加亮，而其它区域变暗给它带来的“高亮”显示感觉，给其以突出的感觉，对于网站的用户体验还是非常不错的，推荐大家使用。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>鼠标经过时变亮显示</title> <script src="/uploads/common/js/jquery-1.4.2.min.js"></script> <style> * {margin:0;padding:0;font-size:12px;list-style:none;border:0;} body {margin:30px;} ul {background:url() no-repeat left top;width:190px;height:300px; float:left;} ul li {float:left;position:relative;width:95px;height:30px;} ul li a {position:absolute;text-indent:-9999px;display:block;width:95px;height:30px;top:0;left:0;overflow:hidden;outline:none;} ul li a:hover { background:#000;opacity:.1;filter:alpha(opacity=10);} .floorMain {float:left;position:relative;} .floorMain a {position:absolute;} .floorMain a.item1 {left:0;top:0;} .floorMain a.item2 {left:195px;top:0;} .floorMain a.item3 {left:195px;top:150px;} .floorMain a.hover {} .veryhuo {position:absolute;background:#000;opacity:0;filter:alpha(opacity=0);left:0;top:0;width:195px;} .m1 {height:300px;} .m2 {height:150px;} .m3 {height:150px;} </style> <script> $(function() { $(".floorMain").find("a").each(function() { $(this).hover(function() { $(this).siblings().find(".veryhuo").stop(); $(this).siblings().find(".veryhuo").fadeTo("fast",0.3); }, function() { $(this).siblings().find(".veryhuo").stop(); $(this).siblings().find(".veryhuo").fadeTo("fast",0); }); }); }) </script> </head> <body> <div style="width:970px;"> <div class="floorMain"> <a href="#" class="item1"><img width="195" height="300" src="/uploads/common/images/liehuo_net_m0.jpg" /><div class="veryhuo m1"></div></a> <a href="#" class="item2"><img width="195" height="150" src="/uploads/common/images/Liehuo_833829.jpg" /><div class="veryhuo m2"></div></a> <a href="#" class="item3"><img width="195" height="150" src="/uploads/common/images/Liehuo_838692.jpg" /><div class="veryhuo m3"></div></a> </div> </div> </body> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：老爷爷站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!