鼠标颠末图片时，其余地区变暗，图片“高亮”表现

发布时间：2018-08-16 04:24:00 所属栏目：访谈来源：站长网

导读：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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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