javascript - 仅影响直接子级的 JQuery 方法

Question

请在下面找到我创建的 fiddle 的链接。

JSFiddle link

这是一个简单的 Jquery 动画。当鼠标进入“黄色 div”时，“红色 div”会放大并产生缩放效果。但是由于 div 是由 CSS 中的单个类组成的，因此将鼠标悬停在一个 div 上会影响所有其他 div。现在我希望这只发生在 div 上，鼠标进入时不会影响其他人。请指导。让我知道是否可以不重复所有 3 个 div 的代码。

到目前为止我做了什么:

//Image Scale Up Animation  
box.mouseenter(function () {
    $('.frame').removeClass("normal").addClass("scale");
});

//Image Scale Down Animation    
box.mouseleave(function () {
     $('.frame').removeClass("scale").addClass("normal");
});

Answer 1

您需要在悬停的 div 中找到元素 .frame。你应该使用:

box.mouseenter(function () {
    $(this).find('.frame').removeClass("normal").addClass("scale");
});


//Image Scale Down Animation    
box.mouseleave(function () {
     $(this).find('.frame').removeClass("scale").addClass("normal");
});

Working Demo