案例4:突出显示案例

<style>
  body{margin: 0;padding: 0;background: #000;}
  a{display: inline-block;}
  img{height:150px;width: 150px;}
  ul{width: 480px;}
  ul li{list-style: none;display: inline-block;}
</style>
<script>
  $(function(){
    $("li").hover(function(){
      $(this).stop().fadeTo(200,1);
      $(this).siblings().stop().fadeTo(200,0.4);   //   fadeTo():淡入淡出效果        fadeOut():淡出效果        fadeIn():淡入效果
    })
  })
</script>
</head>
<body>
  <ul>
    <li><a href="#"><img src="../imgs/1.png"></a></li>
    <li><a href="#"><img src="../imgs/2.png"></a></li>
    <li><a href="#"><img src="../imgs/3.png"></a></li>
    <li><a href="#"><img src="../imgs/4.png"></a></li>
    <li><a href="#"><img src="../imgs/5.png"></a></li>
    <li><a href="#"><img src="../imgs/1.png"></a></li>
  </ul>
</body>
posted @ 2019-08-11 15:51  晴天宝宝i  阅读(182)  评论(0编辑  收藏  举报