Cách áp dụng: di chuột đến một phần tử

Question

Tôi muốn áp dụng trạng thái di chuột từ xa, bằng cách di chuột qua một đối tượng khác. Nhưng tôi muốn đặt tên cho đối tượng có kích hoạt di chuột của nó chứ không phải là do mối quan hệ DOM với mục được di chuột qua.

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

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

Tôi chưa tìm thấy phương pháp javascript hoặc jquery cho phép bạn áp dụng hiệu ứng giả giả trên một phần tử từ xa (tức là độc lập với phần tử thực sự bị di chuột). Có cách nào để làm việc này không?

Answer 1

Nếu bạn có ý nghĩa đặc biệt là pseudo selector CSS :hover, sau đó một yếu tố chỉ có thể kích hoạt nó trên một chừng mực một mối quan hệ có thể được thành lập trong CSS:

http://jsfiddle.net/tFSWt/

ví dụ như anh chị em:

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

dụ như tổ tiên/hậu duệ:

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

Nếu không, bạn sẽ cần phải dựa vào hoạt Javascript để chọn các yếu tố liên quan và thiết lập các phong cách trên hoặc bằng kiểu nội tuyến, hoặc bằng cách thêm một lớp cung cấp phong cách phù hợp.

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>