Question

请在下面找到我创建的小提琴。

这是一个简单的Jquery动画。当鼠标进入“黄色div”时，“Red 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

Answer 2

您可以使用children([selector])

var box = $('.box');

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


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

JSFiddle

Answer 3

您需要选择所选元素的子项。

请参阅以下代码：

var box = $('.box');

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


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

Answer 4

您需要使用$（this）从当前对象中查找帧。

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

Working Demo

在上面的mouseenter示例中，我们需要找到当前帧并在mouseleave上重置动画。

JQuery方法仅影响Direct子级

4 个答案: