Javascript 将箭头与滑块功能分开

我有一个滑块，它可以切换除法器，上面有两个箭头（上一个和下一个），现在我不关心箭头的外观或位置。但是我想让它们功能化，但是应用于滑块的其他功能，如悬停，也应用于箭头。如何保持按钮功能（下一个/上一个），但使其与滑块分离

JSFIDDLE：

CSS:

---

您可以更具体地使用类

的选择器仅针对
div
中的
img
元素。滑块视图区域

jQuery(function ($) {
    $('.slider-view-area img').hover(function () { // on mouseover
        $('.slider-view-area img').stop().not(this).animate({
            'opacity': 0.4
        }, 700); // you can animate this as well
        $(this).animate({
            'opacity': 1
        }, 700);
    }, function () { // on mouseout
        $('#.slider-view-area img').animate({
            'opacity': 1
        }, 700);
    });
});

---

演示：

添加另一个

。不要在代码中过滤，请更改：

$('#first img').stop().not(this).animate({'opacity':0.4},700); // you can animate this as well

到

谢谢，我会在几分钟内批准答案（时间限制）
$('#first img').stop().not(this).animate({'opacity':0.4},700); // you can animate this as well

 $('#first img').stop().not(this).not('#prev, #next').animate({'opacity':0.4},700); // you can animate this as well