आवेदन कैसे करें: किसी तत्व को होवर

Question

मैं एक अलग ऑब्जेक्ट पर होवर करके, होवर राज्य को दूरस्थ रूप से लागू करना चाहता हूं। लेकिन मैं उस ऑब्जेक्ट को नामित करना चाहता हूं जिसके पास होवर सक्रिय हो गया है, इसके बजाय इसे डोम रिलेशनशिप द्वारा आइटम पर रखा जा रहा है।

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

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

मैं एक जावास्क्रिप्ट या jQuery विधि है कि आप दूर से एक तत्व करने के लिए होवर छद्म वर्ग प्रभाव लागू करने की अनुमति देता है नहीं मिला है (यानी यह की स्वतंत्र रूप से वास्तव में hovered जा रहा है)। क्या इसे करने का कोई तरीका है?

Answer 1

आप विशेष रूप से सीएसएस :hover छद्म चयनकर्ता मतलब है, तो एक ही तत्व केवल यह एक और पर ट्रिगर कर सकते हैं जहां तक ​​एक रिश्ते सीएसएस में स्थापित किया जा सकता है:

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

नहीं तो आप संबंधित तत्व का चयन और इनलाइन स्टाइल से या तो पर शैली स्थापित करने के लिए जावास्क्रिप्ट पर भरोसा करने की आवश्यकता होगी, या एक वर्ग को जोड़कर कि उचित शैली प्रदान करता है।

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>