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

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

原创最新推荐文章于 2024-05-15 02:20:54 发布 · 置顶 · 919 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 #javascript #前端 #正则 #正则表达式

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>