JQueryのホバー機能同じクラス名のすべての要素を選択

Question

同じ色/クラス名を持つ現在のホバーされた要素+すべての他の要素を強調表示する必要があります。ここ

例：

https://codepen.io/Kerrys7777/pen/LkaYOW

jQuery(document).ready(function($) { 
    $('.orange-cell, .green-cell, .purple-cell, .white-cell').hover(function() { 
     $(this).addClass('z-relative'); 
     $('#darkness').fadeTo(200, 1); 
    },function() { 
     $(this).removeClass('z-relative'); 
     $('#darkness').fadeTo(200, 0, function(){ 
      $(this).hide(); 
     }); 
    }); 
}); 

Answer 1

後は、あなたのコードに必要な変更です。

HTMLの変更：

<ul> 
    <li class="cell orange-cell" data-color="orange">Home</li> 
    <li class="cell green-cell" data-color="green">About</li> 
    <li class="cell purple-cell" data-color="purple">Contact</li> 
    <li class="cell white-cell" data-color="white">Num</li> 
</ul> 

<h1>Some text here</h1> 

<ul> 
    <li class="cell orange-cell" data-color="orange">Home</li> 
    <li class="cell green-cell" data-color="green">About</li> 
    <li class="cell purple-cell" data-color="purple">Contact</li> 
    <li class="cell white-cell" data-color="white">Num</li> 
</ul> 

<h1>Some text here</h1> 

<ul> 
    <li class="cell orange-cell" data-color="orange">Home</li> 
    <li class="cell green-cell" data-color="green">About</li> 
    <li class="cell purple-cell" data-color="purple">Contact</li> 
    <li class="cell white-cell" data-color="white">Num</li> 
</ul> 

<div id="darkness"></div> 

JSの変更：

jQuery(document).ready(function($) { 
    $('.orange-cell, .green-cell, .purple-cell, .white-cell').hover(function() { 
     var color = $(this).attr('data-color'); 
     $("."+color+"-cell").addClass('z-relative'); 
     $('#darkness').fadeTo(200, 1); 
    },function() {var color = $(this).attr('data-color'); 
     $("."+color+"-cell").removeClass('z-relative'); 
     $('#darkness').fadeTo(200, 0, function(){ 
      $(this).hide(); 
     }); 
    }); 
}); 

Answer 2

あなたはこのように行うことができますHTMLを変更したくない場合。

jQuery(document).ready(function($) { 
    $('.orange-cell, .green-cell, .purple-cell, .white-cell').hover(function() { 
     var colorClass = $(this).attr('class').split(' ')[1]; 
     $("."+colorClass).addClass('z-relative'); 
     $('#darkness').fadeTo(200, 1); 
    },function() {var colorClass = $(this).attr('class').split(' ')[1];; 
     $("."+colorClass).removeClass('z-relative'); 
     $('#darkness').fadeTo(200, 0, function(){ 
      $(this).hide(); 
     }); 
    }); 
}); 

Answer 3

このコードを試してください。あなたのliタグ内に第二位で、あなたは常にカラークラス（緑セル、オレンジ・セル）を追加する必要があることをここで注意する必要があることの一つ

jQuery(document).ready(function ($) { 
    var highlitedClass; 
    $('.orange-cell, .green-cell, .purple-cell, .white-cell').hover(function() { 
     $(this).addClass('z-relative'); 
     var liClass = $(this).prop("class"); 
     $('#darkness').fadeTo(200, 1); 
     liClass = liClass.split(' '); 
     highlitedClass = liClass[1]; 
     $("." + highlitedClass).addClass('z-relative'); 

    }, function() { 
     $(this).removeClass('z-relative'); 
     $("." + highlitedClass).removeClass('z-relative'); 
     $('#darkness').fadeTo(200, 0, function() { 
      $(this).hide(); 
     }); 
    }); 
});