Question

<!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>

图像出现但没有任何反应，只要图像上的鼠标出现其他图像，它就不会褪色。

Answer 1

以下代码适用于我

  $(document).ready(function () {

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

Answer 2

使用.mouseover（）事件并尝试

Answer 3

在<head>部分包含jQuery库。

在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>

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

jquery淡化图像，除了鼠标悬停在图像上

3 个答案: