Question

我有一个主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');
    });

Answer 1

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

$(".testimonial, .plan").hover(function () {
    $(".testimonial:not("+this+")").removeClass('itemActive');
}, function () {
    $(".testimonial").addClass('itemActive');
});

Answer 2

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

Answer 3

我假设你同时拥有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');
});

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

Answer 4

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

var hoverBoxes = $(".testimonial, .plan");
hoverBoxes.hover(
    function () {
        hoverBoxes.not(this).addClass('itemNotActive');
        $(this).addClass('itemActive');
    },
    function () {
       hoverBoxes.removeClass('itemActive').removeClass('itemNotActive');
    });
);

如何增强这个小脚本

4 个答案: