適用方法：要素にカーソルを合わせる

Question

ホバー状態をリモートに適用するには、別のオブジェクトをホバーします。しかし、私はホバリングしているアイテムにDOM関係を持たせるのではなく、ホバーをアクティブにしたオブジェクトに名前を付けるとします。

<style> 
img:hover {border: thin red solid;} 
</style> 

<li id="hover-over-me">Dogs</li> 
<img src="dog.jpg" /> 

私はあなたがリモートで（すなわち独立し、それを実際に推移している）要素にホバー擬似クラスの効果を適用することができますjavascriptやjqueryの方法を発見していません。これを行う方法はありますか？

http://jsfiddle.net/tFSWt/

：関係はCSSで確立することができるものであれば、

Answer 1

、1つの要素だけで、他の上でそれをトリガすることができます兄弟としての例：

祖先/子孫として0

<span>Sibling </span><img src = "http://dummyimage.com/120x90/f00/fff.png&text=my+image" /> 

img:hover { border: 2px dashed blue; } 
span:hover + img { border: 2px dashed blue; } 

例：

<span>Parent 
    <img src = "http://dummyimage.com/120x90/f00/fff.png&text=my+image" /> 
</span> 

img:hover { border: 2px dashed blue; } 
span:hover img { border: 2px dashed blue; } 

そうでなければ、関連する要素を選択し、インラインスタイリングによって、またはそのクラスを追加することにより、いずれかの上にスタイルを設定するためにJavaScriptに依存する必要があります適切なスタイルを提供します。

Answer 2

http://sandbox.phpcode.eu/g/3304b

あなたが特にCSS :hover擬似セレクターを意味する場合

<style> 
img:hover,img.hovered {border: 5px red solid;} 
</style> 
<ul> 
    <li id="hover-over-me">Dogs</li> 
</ul> 
<img src="http://4.bp.blogspot.com/_7VyEDKFMA2U/TOX9ZL7KRPI/AAAAAAAAACM/-XSoYjePBPk/s1600/cute-puppy-dog-wallpapers.jpg" /> 
<script> 
$("li").mouseenter(function(){ 
    $("img").addClass('hovered'); 
}); 

$("li").mouseout(function(){ 
    $("img").removeClass('hovered'); 
}); 


</script>