0

我有一个主 div，主 div 里面的 div，主 div 里面的所有 div 都用 .testimonial 分类，每个 div 里面都有一个图像...

我想要的是：当将鼠标悬停在其中一张图像上时，例如，div 内的所有图像的不透明度为 60%，所选图像将保持 100% 的不透明度。通过使用下面的脚本，一切都很好。但是我想知道是否有更好的方法来做到这一点？或增强下面的脚本？我问的唯一原因是因为正如您在下面的脚本中看到的那样，有两个函数可以完成这项工作！我们不能只做一个吗？

//Testimonials Animation//
    $(".testimonial, .plan").hover(function () {
        $(".testimonial, .plan").addClass('itemNotActive');
        $(this).removeClass('itemNotActive').addClass('itemActive');
    },

    function () {
        $(".testimonial, .plan").removeClass('itemNotActive');
        $(this).removeClass('itemActive');
    });
4

4 回答 4

0

编辑：这就是你想要的。在您悬停之前，所有推荐都处于默认状态（itemActive），并且除了悬停的项目之外没有应用 itemActive。现在将您的 itemNotActive 设为默认状态。

$(".testimonial, .plan").hover(function () {
    $(".testimonial:not("+this+")").removeClass('itemActive');
}, function () {
    $(".testimonial").addClass('itemActive');
});
于 2013-11-06T18:43:50.770 回答
0 
 $(".testimonial, .plan").hover(function () {
        $(this).removeClass('itemNotActive').addClass('itemActive');
    },
    function () {
        $(this).removeClass('itemActive').addClass('itemNotActive');;
    });
于 2013-11-06T18:46:59.957 回答
0

我假设您拥有两者的原因active是notActive因为它们都有特殊的风格。你可以这样做：

http://jsfiddle.net/9tr72/

$('.testimonial').on('mouseenter', function() {
    $('.testimonial').not(this).addClass('not-active');
    $(this).addClass('active');
}).on('mouseleave', function() {
    $('.testimonial').removeClass('active not-active');
});

即便如此，它也只节省了一行。每个事件需要发生不同的事情，因此需要两个处理程序。

于 2013-11-06T18:55:38.293 回答
0

我首先要做的一件事是缓存 jQuery。但除此之外，由于有两个不同的事件做两件不同的事情，所以你需要两个函数。即使您有一个处理这两个事件的混合函数，也没有意义，它只会混淆代码。

var hoverBoxes = $(".testimonial, .plan");
hoverBoxes.hover(
    function () {
        hoverBoxes.not(this).addClass('itemNotActive');
        $(this).addClass('itemActive');
    },
    function () {
       hoverBoxes.removeClass('itemActive').removeClass('itemNotActive');
    });
);
于 2013-11-06T19:37:38.543 回答