图片突出显示（jquery）

最新推荐文章于 2022-04-27 21:09:28 发布

tianshizhimeng155

最新推荐文章于 2022-04-27 21:09:28 发布

阅读量808

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/u013267266/article/details/51253856

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body{
background:#000;
}
body,div,ul,li,img{padding:0;margin:0;border:0;list-style:none;}
.all{width:630px;border:1px solid #ccc;margin:100px auto;overflow:hidden;}
li{
width:200px;height:186px;float:left;margin-right:10px;margin-bottom:10px;cursor:pointer;
}
</style>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
$(function(){
$("li").mouseover(function(){
$(this).siblings(). stop().fadeTo(500,0.3);
})
$("li").mouseout(function(){
$(this).siblings(). stop().fadeTo(500,1);
})
})

</script>

</head>
<body>
<div class="all" id="box">
<ul>
<li><img src="img/01.jpg" height="186" width="200"/></li>
<li><img src="img/02.jpg" height="186" width="200"/></li>
<li><img src="img/03.jpg" height="186" width="200"/></li>
<li><img src="img/04.jpg" height="186" width="200"/></li>
<li><img src="img/05.jpg" height="186" width="200"/></li>
<li><img src="img/06.jpg" height="186" width="200"/></li>
</ul>
</div>
</body>
</html>