Cómo aplicar: desplácese hacia un elemento

Question

Deseo aplicar el estado de desplazamiento de forma remota, colocando el cursor sobre un objeto diferente. Pero quiero nombrar el objeto que tiene activado el elemento emergente en lugar de tenerlo por relación DOM con el elemento sobre el que se pasa el mouse.

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

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

no he encontrado un método javascript o jquery que le permite aplicar el efecto libración pseudo-clase a un elemento de forma remota (es decir, independientemente de que en realidad siendo oscilado). ¿Hay alguna forma de hacer esto?

Answer 1

Si se refiere específicamente el selector de pseudo CSS :hover, a continuación, un elemento sólo puede desencadenar en otra medida en que una relación puede establecerse en el CSS:

http://jsfiddle.net/tFSWt/

ejemplo como hermanos:

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

ejemplo, como antepasado/descendiente:

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

De lo contrario, tendrá que depender de JavaScript para seleccionar el elemento relacionado y establecer el estilo de línea, ya sea por el estilo, o mediante la adición de una clase que proporciona el estilo apropiado.

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