Javascript：ホバー要素、無関係な要素のクラスを変更します

Question

私は広範囲に検索し、解決策を見つけることができません。

私は2つのdivを持っています。もう一方の右に1つ。各divにはリスト要素がありますが、彼らは決して親や兄弟ではないので、私はCSSを使うことはできません。

誰かが解決策を持っていますが、どこにHTMLドキュメントが置かれているかに関係なく、HTMLドキュメント内のどこにでもリンクを張って、別の要素のクラスを変更することができます。例えばJavascript。

アイデアは、左のリストに要素を置くと、それが関連すると考えられる要素を右側のリストで強調表示するという考えです。

Answer 1

これを達成する方法はたくさんあります。私は、mouseenter mouseleaveイベント（基本的にhover）のために、別の要素のクラスを操作するためにjQueryを使用するサンプルを作成しました。

<div class="red"> 
    x 
</div> 
<div class="green"> 
    y 
</div> 

$('.red').on('mouseenter mouseleave', function() { 
    if ($('.green').hasClass('hover')) { 
    $('.green').removeClass('hover'); 
    } else { 
    $('.green').addClass('hover'); 
    } 
}); 

Sample

Answer 2

jqueryのは、かなり大規模なライブラリです。私は非常に純粋なjavascriptでこれを行うことをお勧めしますあなたはあなたのWebページの他の場所でJqueryを使用していない場合。ここでは、単純なIf文で別のdivが呼び出されたときにdivのクラスを変更する例を作成します。ここで

https://jsfiddle.net/c16rvt0y/1/

function highlightDiv(){ 
    if (document.getElementById("highlightMe").className === "otherDiv"){ 
     document.getElementById("highlightMe").className = "otherDiv otherDivHighlighted" 
    } else { 
    document.getElementById("highlightMe").className = "otherDiv" 
    } 
} 

1が関数によって呼び出されるにdepanding別のdivを対象例である：

https://jsfiddle.net/c16rvt0y/2/

function highlightDiv(highlightMeID){ 
    if (document.getElementById(highlightMeID).className === "otherDiv"){ 
     document.getElementById(highlightMeID).className = "otherDiv otherDivHighlighted" 
    } else { 
    document.getElementById(highlightMeID).className = "otherDiv" 
    } 

}