Question

尝试使用悬停移动一些div，这是我的标记：

<div class="item dark-grey">
    <div class="img">
        <img src="images/case-study-develop.jpg" width="174" height="59" alt="Case Study">
    </div>
    <div class="triangle-container">
        <div class="triangle-border-light-blue"></div>
        <div class="triangle-dark-grey"></div>
    </div>
    <div class="content light-blue">
        <h2><a href="#">Developing community work with the voluntary sector</a></h2>
    </div>
</div>

这就是我现在正在使用的，它工作正常但我只希望将鼠标悬停在内容div上，而不是整个项目div。

$(document).ready(function() {
            $('.item').hover(function(e){
                    $('.img', this).animate({height: "30px"},100);
            },function(e){
                    $('.img', this).animate({height: "58px"},100);
            });
    });

我想如果我将鼠标悬停在.item .content上然后获取父级，并找到属于父级的.img它会起作用，但我不确定我是否正确行事。

$('.item .content').hover(function(e){
                $(this).parents('.img').animate({height: "30px"},100);
}

Answer 1

由于.img不是.content的父级，因此您所拥有的内容无效。

您可以查看siblings()的{{1}}：

.content()

或者您可以将DOM遍历到$('.item .content').hover( function(e){ $(this).siblings('.img').animate({ height: "30px" }, 100); }, //function... });的父级，然后.content：

find('.img')

或者，如果您可以保证这些div的结构永远不会改变，您可以使用$('.item .content').hover( function(e){ $(this).parent().find('.img').animate({ height: "30px" }, 100); }, //function... });：

prev()

Answer 2

听起来你想要这个：

$('.item .content').hover(function(e) {
    $(this).closest('.item').find('.img').animate({height: "30px"}, 100);
}, function(e) {
    $(this).closest('.item').find('.img').animate({height: "58px"}, 100);
});

这将监视悬停在.content对象上，当悬停事件发生时，它将找到.item容器，然后在该容器中找到.img对象并为其设置动画。

这里的一个关键点是.closest()，它找到与给定选择器匹配的第一个祖先，这对于查找特定的容器div非常有用。

Answer 3

<img />不是.item .content元素的父级，因此您无法使用它。

您可以使用.item导航至closest()元素，然后从那里获取.img元素;

$(this).closest('.item').children('img').animate({height: "30px"},100);

虽然.img元素是你可以做的.item .content元素的兄弟;

$(this).siblings('.img').animate({height: "30px"},100);

有关详细信息，请参阅siblings()和closest()文档。

Answer 4

$(this).parent().find('.img')

应该有效

在jQuery中查找属于parent的类

4 个答案: