以下是 jquery鼠标悬浮高亮开关灯特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery鼠标悬浮高亮开关灯</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
</head>
<body>
<div class="content overflow m_t_15">
<div class="box_01 m_t_45">
<div class="con_04">
<ul>
<li> <a href="#" title="津桥留学-一个培养多位诺贝尔奖得主的大学-谢菲尔德大学" target="_blank"><img src="images/img_12.gif" width="302" height="203" alt="津桥留学-一个培养多位诺贝尔奖得主的大学-谢菲尔德大学" /></a>
<div class="li_bg_02"></div>
</li>
<li> <a href="#" title="津桥留学-2013年爱尔兰高考双保险+奖学金留学计划" target="_blank"><img src="images/img_13.gif" width="302" height="203" alt="津桥留学-2013年爱尔兰高考双保险+奖学金留学计划" /></a>
<div class="li_bg_02"></div>
</li>
<li> <a href="#" title="津桥留学—2013英国留学费用指南" target="_blank"><img src="images/img_14.gif" width="302" height="203" alt="津桥留学—2013英国留学费用指南" /></a>
<div class="li_bg_02"></div>
</li>
<li> <a href="#" title="精彩专题" target="_blank"><img src="images/img_15.gif" width="302" height="203" alt="精彩专题" /></a>
<div class="li_bg_02"></div>
</li>
<li> <a href="#" title="《津桥名人堂》精英学子系列——孙明" target="_blank"><img src="images/img_16.gif" width="302" height="203" alt="《津桥名人堂》精英学子系列——孙明" /></a>
<div class="li_bg_02"></div>
</li>
<li> <a href="#" title="插上外交官梦想的翅膀" target="_blank"><img src="images/img_17.gif" width="302" height="203" alt="插上外交官梦想的翅膀" /></a>
<div class="li_bg_02"></div>
</li>
<li> <a href="#" title="《津桥名人堂》精英学子系列——吴晓霜" target="_blank"><img src="images/img_18.gif" width="302" height="203" alt="《津桥名人堂》精英学子系列——吴晓霜" /></a>
<div class="li_bg_02"></div>
</li>
<li> <a href="#" title="国内专科生去英国留学,一样高端大气上档次" target="_blank"><img src="images/img_19.gif" width="302" height="203" alt="国内专科生去英国留学,一样高端大气上档次" /></a>
<div class="li_bg_02"></div>
</li>
<li> <a href="#" title="津桥留学- 2013津桥留学史上含金量最高OFFER雨降临,幸福ing" target="_blank"><img src="images/img_20.gif" width="302" height="203" alt="津桥留学- 2013津桥留学史上含金量最高OFFER雨降临,幸福ing" /></a>
<div class="li_bg_02"></div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".con_04 ul li").hover(
function(){
$(this).siblings().find(".li_bg_02").fadeIn(250)
},
function(){
$(this).siblings().find(".li_bg_02").fadeOut(50)
}
)
})
</script>
</body>
</html>
CSS代码(css.css):
/* CSS Document */
/*全局*/
body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif,Regular;font-size:12px;color:#142044;background:url(../images/bg.gif);}
div,form,input,select,p,table,h1,h2,h3,h4,h5,h6,ul,ol,li,th,td,dl,dt,dd,span{margin:0;padding:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:bold;}
ul,ol,dl,dt,dd{list-style:none outside none;}
a{text-decoration:none;color:#09194f;outline:none;star:expression(this.onFocus=this.blur())}
*html,*html{background-image:url(about:blank);background-attachment:fixed}
/*处理IE6滚动的BUG*/
a:hover{color:#e4420d;text-decoration:underline;}
table{border-collapse:collapse;}
img{border:none;}
em,i{font-style:normal;}
*{margin:0px;padding:0px;}
input{outline:none;}
select{outline:none;}
textarea{outline:none;}
.clear{clear:both;height:0px;visibility:hidden;overflow:hidden;line-height:normal;}
/*************内容***********/
.con_04{width:950px;padding:24px;border:#d8d8d8 1px solid;background:#fff;padding-top:5px;overflow:hidden;}
.con_04 ul li{margin-right:15px;margin-top:15px;width:302px;height:203px;overflow:hidden;float:left;position:relative}
.con_04 ul{overflow:hidden;width:1000px;padding-left:5px;}
.con_04 ul li .li_bg_02{width:320px;height:203px;display:none;background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;position:absolute;z-index:5;left:0px;top:0px;}
/***全局宽********/
.content{width:1000px;margin:0px auto;margin-top:45px;}
.overflow{overflow:hidden;}
.m_t_45{margin-top:45px;}
分享到QQ
分享到微博
微信扫一扫
