Nasıl başvurulur: öğenin üzerine gelin.

Question

Farklı bir nesneyi fareyle üzerine getirerek, geçiş durumunu uzaktan uygulamak istiyorum. Ancak, hover'ın üzerinde durduğu öğeyle DOM ilişkisi olması yerine, vurgunun etkinleştirildiği nesneyi adlandırmak istiyorum.

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

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

Ben (yani bağımsız bunun aslında süpürdü ediliyor) uzaktan bir öğeye vurgulu sözde sınıfı efekti uygulamak için izin veren bir javascript veya jquery yöntemini bulamadı. Bunu yapmanın bir yolu var mı?

http://jsfiddle.net/tFSWt/

: Bir ilişki CSS kurulmuş olabildiği sürece

Answer 1

, sonra bir eleman sadece başka bir bilgisayarda tetikleyebilir Kardeş olarak örnek:

atası/soyundan olarak 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; } 

örnek:

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

Aksi takdirde, ilgili öğeyi seçin ve satır içi stil yoluyla ilgili stilini ayarlamak için JavaScript güvenmek gerektiğini, aksi bir sınıf ekleyerek o uygun stil sağlar.

Answer 2

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

Özellikle CSS :hover sözde seçici kastediyorsan

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