一度に複数の要素をホバーし、下位互換性があります。

Question

スクランブルされた見た目のナビゲーションメニューを設定したいと思います。単語は分割されますが、1つの単語にカーソルを合わせると、対応する言葉がすべて異なる色に変わり、その方法が狂気に現れます。私はhtml/cssでこれを一つの方向に達成することができましたが、CSSは "カスケード"しています。逆に働くことはできません。ここで私は探しています何の例です：

例のリンクは次のようになります -

赤の広場は
ブルーサークル
グリーントライアングル

私はこのように、メニューはスクランブル見てみたい -

は、

レッドブルースクエアグリーンサークルトライアングル

「赤い」または「スクエア」の上にカーソルを置くと、両方のリンクが異なるcolまたは は "ブルー" の上にマウスを置くOR "サークル" など、それらを変更...

だから私のメニューHTMLのようなものになります -

<ul> 
 
<li><a href="/link1" class="one">Red</a></li> 
 
<li><a href="/link2" class="two">Blue</a></li> 
 
<li><a href="/link1" class="one">Square</a></li> 
 
<li><a href="/link3" class="three">Green</a></li> 
 
<li><a href="/link2" class="two">Circle</a></li> 
 
<li><a href="/link3" class="three">Triangle</a></li> 
 
</ul>

を私はこれはおそらくすることができると思いますjqueryで簡単に達成できますが、少し助けが必要です。

ありがとうございました。

Answer 1

jQueryを使用します。ここで

https://jsfiddle.net/cofr7498/

$(".one").mouseover(function(){ 
 
    $(".one").css("color", "red"); 
 
}); 
 
$(".one").mouseout(function(){ 
 
    $(".one").css("color", "blue"); 
 
}); 
 
$(".two").mouseover(function(){ 
 
    $(".two").css("color", "red"); 
 
}); 
 
$(".two").mouseout(function(){ 
 
    $(".two").css("color", "blue"); 
 
}); 
 
$(".three").mouseover(function(){ 
 
    $(".three").css("color", "red"); 
 
}); 
 
$(".three").mouseout(function(){ 
 
    $(".three").css("color", "blue"); 
 
});

li { 
 
    display: inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="/link1" class="one">Red</a></li> 
 
    <li><a href="/link2" class="two">Blue</a></li> 
 
    <li><a href="/link1" class="one">Square</a></li> 
 
    <li><a href="/link3" class="three">Green</a></li> 
 
    <li><a href="/link2" class="two">Circle</a></li> 
 
    <li><a href="/link3" class="three">Triangle</a></li> 
 
</ul>

Answer 2

addEventListenerとmouseoverイベント

を使用すると、それはulにホバー要素のクラスを設定し、単純に1、本当に簡単な方法ですクラスをペアにするul.one .one

私が探しています正確に何であるように見えるん

document.querySelector('ul').addEventListener('mouseover', function(e) { 
 
    this.className = e.target.className; 
 
})

ul.one .one { 
 
    color: red; 
 
} 
 
ul.two .two { 
 
    color: yellow; 
 
} 
 
ul.three .three { 
 
    color: green; 
 
}

<ul> 
 
    <li><a href="/link1" class="one">Red</a></li> 
 
    <li><a href="/link2" class="two">Blue</a></li> 
 
    <li><a href="/link1" class="one">Square</a></li> 
 
    <li><a href="/link3" class="three">Green</a></li> 
 
    <li><a href="/link2" class="two">Circle</a></li> 
 
    <li><a href="/link3" class="three">Triangle</a></li> 
 
</ul>