如何將鼠標懸停在圖像上但改變表格中的多個圖像

我有一張桌子，其中有50張圖像（10x5）全部都是淡色的，當我將鼠標懸停在圖像上時，它會使照亮的亮起來。我正在努力的是懸停在圖像上，桌面上有多個圖像也很突出。（我想脫穎而出的相關圖片在表格中是隨機的）。如何將鼠標懸停在圖像上但改變表格中的多個圖像

我到目前爲止的腳本是這樣的;

<script type="text/javascript"> 
     $(function() { 
      $('.imgOpa').each(function() { 
       $(this).hover(
        function() { 
         $(this).stop().animate({ opacity: 1.0 }, 800); 
        }, 
        function() { 
         $(this).stop().animate({ opacity: 0.5 }, 800); 
        }) 
       }); 
     }); 
</script>

如果我能得到任何好的建議，即使它告訴我它是不可能的！

來源

2012-05-15 Handy Andy Mutter

其他人是真正的「隨機」還是他們以某種方式與當前元素被關聯在一起？它們是否存儲在某個數據結構中，您可以在$（this）進行盤旋時訪問它們？ – veeTrain

試試這個，懸停功能內改變$(this)一類......然後所有同一類的圖像將動畫

$('.imgOpa').each(function() { 
    $(this).hover(function() { 
     $('.class').stop().animate({opacity: 1.0}, 800); 
    }, function() { 
     $('.class').stop().animate({opacity: 0.5}, 800); 
    }) 
});

或能更好地與動畫相關圖像使用data

<img src="blah.jpg" class="imgOpa someclass" data-assoc="someclass"/> 
<img src="blah.jpg" class="imgOpa someclass"/> 
<img src="blah.jpg" class="imgOpa someotherclass"/>

然後

$('.imgOpa').each(function() { 
    $(this).hover(function() { 
     $('.' + $(this).data('assoc')).stop().animate({opacity: 1.0}, 800); 
    }, function() { 
     $('.' + $(this).data('assoc')).stop().animate({opacity: 0.5}, 800); 
    }) 
});

這將動畫所有的圖像與類someclass（即第一個和第二個圖像，但不是第三）動畫時，圖像是徘徊....

來源

2012-05-15 16:03:11 ManseUK

謝謝，幫助加載：] –

@HandyAndyMutter不要忘記[接受答案]（http://meta.stackexchange.com/a/5235/170679）所有你問的問題 – ManseUK

你的意思是這樣的？

<script type="text/javascript"> 
    $(function() { 
     $('.imgOpa').each(function() { 
      $(this).hover(
       function() { 
        $(this).stop(); 
        $('.imgOpa').animate({ opacity: 1.0 }, 800); 
       }, 
       function() { 
        $(this).stop(); 
        $('.imgOpa').animate({ opacity: 0.5 }, 800); 
       }) 
      }); 
    }); 
</script>

來源

2012-05-15 16:04:07

如何將鼠標懸停在圖像上但改變表格中的多個圖像

回答

相關問題