鼠标移上移出图片透明度变化

最新推荐文章于 2024-05-15 02:20:54 发布

置顶 zn19901023aa

最新推荐文章于 2024-05-15 02:20:54 发布

阅读量919

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： web前端 javascript 前端正则正则表达式

本文链接：https://blog.youkuaiyun.com/zn19901023aa/article/details/37567333

web前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的图片鼠标悬停显示效果。通过简单的HTML结构与jQuery结合，可以使页面上的图片在鼠标悬停时透明度增加，增强用户体验。

<html>
<head>
   <title></title>
   <script src="js/jquery-1.4.js"></script>
   <script>
   $(function(){
       $(".more a").fadeTo(500,0.5);
       $(".more a").mouseover(function(){
           $(this).fadeTo(500,1);

       });
       $(".more a").mouseout(function(){
           $(this).fadeTo(500,0.5);

       });

   })
   </script>

</head>
<body style="text-align:center;margin:0 auto;">

   <div class="more">
   <a href="#"><img src="images/img1.jpg" title="titleImg1" alt="altImg1"/></a>
   <a href="#"><img src="images/img2.jpg" title="titleImg1" alt="altImg1"/></a>
   <a href="#"><img src="images/img3.jpg" title="titleImg1" alt="altImg1"/></a>
   <a href="#"><img src="images/img4.jpg" title="titleImg1" alt="altImg1"/></a>
   <div>
   <p></p>
</body>
</html>