jquery - 使用 jQuery 更改其他 div 上的 CSS

Question

好的，所以基本上有 3 个 div，全部垂直堆叠。每个都分配了自己的类（.inner1、.inner2 和 .inner3） 我希望发生的情况是，当您将鼠标悬停在其中一个上时，其他 2 个淡出到 40% 透明。每个人都有能力使其他人淡出。将鼠标悬停在#1 上，#2 和 3 淡出。将鼠标悬停在#2 上，#1 和 3 淡出……这有意义吗？

非常感谢你们！

Answer 1

对于初学者来说，这应该做

您可以将mouseoverandmouseleave事件与animate

$('[class*=inner]').on({
    mouseover : function() {
        $('[class*=inner]').not(this).animate({opacity : 0.4},1000);
    },
    mouseleave : function() {
        $('[class*=inner]').not(this).animate({opacity : 1},1000);
    }
});

检查小提琴

Answer 2

像这样试试

$("div[class^='inner']").on('mouseover',function(){
     var selected_div = $(this);
     $("div[class^='inner']").not(this).each(function(){
              $(this).fadeOut('slow');  //you can apply any other animation effects   
     });
});

假设您需要将它们显示在mouseleave

Answer 3

和之前的类似：

$("div[class^='inner']").on('mouseover',function(){
     var div = $(this);
     $("div[class^='inner']").not(this).each(function(){
          $(this).fadeTo('slow', 0.4);
     });
});

$("div[class^='inner']").on('mouseout',function(){
     $("div[class^='inner']").not(this).each(function(){
          $(this).fadeTo('slow', 1);
     });
});

此处示例：示例