Как применить: наведите указатель на элемент

Я хочу применить состояние зависания удаленно, зависая на другом объекте. Но я хочу назвать объект с активированным зависанием, а не с отношением DOM к тому, что элемент зависает.

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

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

Я не нашел javascript или jquery-метод, который позволяет применять эффект псевдокласса hover к элементу удаленно (т.е. независимо от его фактического зависания). Есть ли способ сделать это?

Ответ 1

Если вы имеете в виду псевдоселектор CSS :hover, то один элемент может запускать его только на другом, поскольку в CSS может быть установлено отношение:

http://jsfiddle.net/tFSWt/

пример как братья и сестры:

<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, чтобы выбрать связанный элемент и установить стиль либо с помощью встроенного стиля, либо путем добавления класса, который обеспечивает соответствующий стиль.

Ответ 2

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

<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>