jQuery淡化图像，但图像除外，鼠标悬停在图像上

jquery to fade images except for the image with mouse over it

本文关键字：图像 悬停 鼠标 jQuery      更新时间：2023-09-26
<!DOCTYPE html> 
<html> 
<head> 
    <script>
       $(".playThumb").fadeTo("normal", 1);
        $(".playThumb").hover(function() {
                      $(".playThumb").not($(this)).fadeTo("fast", 0.3); },
      function() {
                      $(".playThumb").not($(this)).fadeTo("fast", 1);
                 });
         </script>
<body> 
<a href="#"><img src="artistry.png" class="playThumb" />
<a href="#"><img src="flavour.png" class="playThumb" />
<a href="#"><img src="quality.png" class="playThumb" />
<a href="#"><img src="Style.png" class="playThumb" />
</body> 
</html>
图像

出现，但没有任何反应，每当鼠标在图像上其他图像时，它就不会褪色。

以下代码对我有用

  $(document).ready(function () {
            $(".playThumb").hover(function () {
                $(".playThumb").not($(this)).fadeTo("fast", 0.3);
            }, function () {
                $(".playThumb").not($(this)).fadeTo("fast", 1);
            })
   });

  1. 在<head>部分包含 jQuery 库。

  2. 在 DOM 就绪函数中添加您的 JS 代码。

    <script>
    $(document).ready(function(){
       $(".playThumb").fadeTo("normal", 1);
       $(".playThumb").hover(function() {
             $(".playThumb").not($(this)).fadeTo("fast", 0.3); 
       },
       function() {
           $(".playThumb").not($(this)).fadeTo("fast", 1);
       });
    });
</script>

  3. 您的 HTML 没有结尾</head>标记。

使用 .mouseover(( 事件并尝试

相关文章：