Question

I want to apply the hover state remotely, by hovering on a different object. But I want to name the object that has its hover activated rather than have it be by DOM relationship to the item being hovered over.

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

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

I haven’t found a javascript or jquery method that allows you to apply the hover pseudo-class effect to an element remotely (ie independently of it actually being hovered). Is there a way to do this?

Answer 1

If you mean specifically the CSS :hover pseudo selector, then one element can only trigger it on another insofar as a relationship can be established in CSS:

http://jsfiddle.net/tFSWt/

example as siblings:

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

example as ancestor/descendant:

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

Otherwise you’ll need to rely on JavaScript to select the related element and set the style on either by inline styling, or by adding a class that provides the appropriate style.