足球游戏_中国足彩网¥体育资讯$

jQuery实现鼠标经过图片变亮其他变暗效果
来源:易贤网 阅读:1747 次 日期:2015-05-11 14:13:40
温馨提示:易贤网小编为您整理了“jQuery实现鼠标经过图片变亮其他变暗效果”,方便广大网友查阅!

jQuery实现的仿商城图片变亮变暗效果,鼠标悬停图片之后该图片变亮,其他图片变暗。移开鼠标所有图片变亮,兼容主流浏览器,适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗,有需要的小伙伴可以参考下。

以下是完整源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<title>jQuery实现鼠标经过图片变亮效果</title><base target="_blank" />

<style type="text/css">

a {color:white;}

body{background:#000;}

body,div,ul,li,img{padding:0;margin:0; border:0; list-style:none;}

.hovertreebox{width:630px; border:1px solid #ccc; margin:10px auto; overflow:hidden; padding:10px 0 0 10px;}

.hovertreebox li{width:200px; height:186px; float:left; margin-right:10px; margin-bottom:10px; cursor:pointer;}

</style>

<script type="text/javascript" src="jquery/jquery-1.11.2.min.js"></script>

<script type="text/javascript">

$(function(){

$('.hovertreebox li').mouseover(function (e) {

$(this).siblings().stop().fadeTo(500,0.4);

});

$('.hover'+'treebox li').mouseout(function (e) {

$(this).siblings().stop().fadeTo(500,1);

});

})

</script>

</head>

<body>

<div style="color:white">jQuery突出图片列表中鼠标经过项

<br /></div>

<div class="hovertreebox" id="hovertreelist">

<ul>

<li><img src="/images/01.jpg" width="200" height="186" /></li>

<li><img src="/images/02.jpg" width="200" height="186" /></li>

<li><img src="/images/03.jpg" width="200" height="186" /></li>

<li><img src="/images/04.jpg" width="200" height="186" /></li>

<li><img src="/images/05.jpg" width="200" height="186" /></li>

<li><img src="/images/06.jpg" width="200" height="186" /></li>

</ul>

</div>

</body>

</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看脚本栏目
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标