Javascript 如何增强这个小脚本

我有一个主div，主div里面的div，主div里面的所有div都被分类。推荐，推荐的每个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');
    });

---

编辑：这就是你想要的。所有证明都处于默认状态（itemActive），直到您悬停并且只有悬停的项目应用了itemActive。现在将itemNotActive设置为默认状态

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

---

我假设您同时拥有

active

和

notActive

的原因是因为它们都有特殊的样式。您可以这样做：

---

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

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

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

---

hover应该是两个函数，mouseover和mouseoutn不确定为什么需要添加一个非活动类。正常情况下，“非活动”是默认状态，因此您只能通过itemActive覆盖所需的样式，而不是有两个类，每个类对应一个不同的状态。在我的情况下，如果要进行实时预览，请转到此处：现在的工作方式是这样的，我只需要一个更好的脚本将活动样式应用于选定的图像，但不将notActive样式应用于所有其他图像。因此默认情况下，所有图像都具有100%不透明度且没有阴影。但当你将鼠标悬停在一个图像上时，所选图像将有阴影，所有其他图像将有50%的不透明度，依此类推，就像上面的实时链接一样。如果无法正常工作，mate，对于实时测试，请转到此处：并向下滚动到推荐部分。与我所拥有的没有太大区别，但将使用它，我可以问一下你为什么要使用鼠标器和鼠标套吗？@Loai出于某种原因，我认为

hover

不受欢迎，但文档上说不是这样。无论如何，

hover

是我所拥有的东西的简写，我倾向于使用

.on（'event'，function（）{…}）

作为一般规则。

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

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