Question

如何让Jquery代码只选择主div（.post）？它也会影响它的孩子，内部div。

我用这个：

$(document).ready(function() {
$( ".post" )
    .mouseover(function() {
        $(this).animate({
            height: 180,
            width: 160
        }, 200, function() {
            // Animation complete.
        });
    })
    .mouseout(function() {
        $(this).animate({
            height: 150,
            width: 150
        }, 200, function() {
            // Animation complete.
        });
    });

}）;

以下是代码：http://jsfiddle.net/q5g4xrqf/

Answer 1

切换.mouseover()和.mouseout() .mouseenter()和.mouseleave()：

$(document).ready(function () {
    $(".post")
        .mouseenter(function () {
        $(this).animate({
            height: 180,
            width: 160
        }, 200, function () {
            // Animation complete.
        });
    })
        .mouseleave(function () {
        $(this).animate({
            height: 150,
            width: 150
        }, 200, function () {
            // Animation complete.
        });
    });
});

<强> jsFiddle example

来自文档：

mouseenter / mouseleave事件的处理方式与mouseover / mouseout不同事件冒泡。 mouseenter / mouseleave事件仅触发其处理程序鼠标进入/离开它所绑定的元素，而不是后代。

另请注意，您还可以使用调用mouseenter和mouseleave的.hover()函数稍微缩短代码。

Answer 2

mouseover和mouseout正在此处执行其功能。使用hover来抵消这种影响。

<强> WORKING DEMO ：

$(document).ready(function () {
    $('.post').hover(function () {
        $(this).animate({
            height: 180,
            width: 160
        }, 200, function () {
            // Animation complete.
        });
    }, function () {
        $(this).animate({
            height: 150,
            width: 150
        }, 200, function () {
            // Animation complete.
        });
    });   
});

Answer 3

解决方案：使用mouseenter和mouseleave

**原因：*正如jQuery doc所述，mouseover和mouseout指向子元素：

当指针移动到子元素时，
mouseover会触发，而mouseenter仅在指针移动到绑定元素时触发。

mouseout和mouseleave也是如此。

小提琴：http://jsfiddle.net/q5g4xrqf/3/

JQuery选择器会影响它的子节点

3 个答案: