Question

我的问题是我有一个图像网格和这些图像的标题都有相同的类。

因此网格中每个图像和标题的HTML都是

<a href="">
<div class="front-menu-image">
<img src="" width="224" height="224"/>
</div>
<div class="front-menu-title">TITLE</div>
</a>

我试过了：

jQuery(document).ready(function($){

    jQuery('.front-menu-image').hover(
        function () {
            jQuery(.front-menu-title).animate({height:'50'});
         },
        function () {
            jQuery(.front-menu-title).animate({height:'25'});
        }
    );  
});

但显然这会导致网格中的所有内容都被动画化，而我只想让相关的内容受到影响。

Answer 1

试试这个：

$(function(){
  $(".front-menu-image").hover(
    function(){
      $(this).siblings(".front-menu-title").animate({height: '50'})
    }
  );
});

您可以在事件处理程序中使用 this 来引用当前对象。

Answer 2

试试这个......

jQuery(document).ready(function($){
    jQuery('.front-menu-image').hover(
        function () {
            jQuery(this).next('.front-menu-title').animate({height:'50'});
         },
        function () {
            jQuery(this).next('.front-menu-title').animate({height:'25'});
        }
    );  
});

它赋予事件处理程序相同的内容，但在其中它会查找具有标题类的下一个元素，相对于您正在悬停的内容（请参阅this的使用）。

Answer 3

这将仅为您将悬停的图像设置动画： -

jQuery(document).ready(function($){

jQuery('.front-menu-image').on('hover', function () {
        jQuery(.front-menu-title).animate({height:'50'});
     },
    function () {
        jQuery(.front-menu-title).animate({height:'25'});
    }
);  
});

要了解更多关于.click（）和.on（＆＃39;点击＆＃39;）之间的区别，请参阅此处Difference between .on('click') vs .click()

将鼠标悬停在另一个div上时动画div

3 个答案: