Bạn có thể xem trước ví dụ để thấy thay đổi khi di chuột qua các bức ảnh

Cấu trúc của hover() như sau:

$('div').hover(function() {
    // mã javascript
}, function() {
    // mã javascript
});

Trong ví dụ, trước tiên tôi dùng jQuery để đưa tất cả các ảnh về opacity 50%, sau đó khi di chuột vào ảnh bạn sẽ thấy opacity lên 100% và trở về 50% khi bạn di chuột ra ngoài

Mã HTML như sau:

 <div id="demohover">
    <img src="demopic/simpleslideshow/1.jpg" width="500" height="260" />
    <img src="demopic/simpleslideshow/2.jpg" width="500" height="260" />
    <img src="demopic/simpleslideshow/3.jpg" width="500" height="260" />
    <img src="demopic/simpleslideshow/4.jpg" width="500" height="260" />
    <img src="demopic/simpleslideshow/5.jpg" width="500" height="260" />
</div>

Và mã javascript với jQuery

$(function() {
	$('#demohover img').animate({"opacity": .5 });
	$('#demohover img').hover(function() {
		$(this).animate({ "opacity": 1 });
	}, function() {
		$(this).animate({ "opacity": .5 });
	});
});

Sau bước này, bạn có thể di chuột liên tục qua 2 bức ảnh, sau đó di chuột ra ngoài sẽ thấy hiệu ứng vẫn tiếp tục, để gỡ lỗi này bạn có thể dùng stop() như sau:

$(function() {
	$('#demohover img').animate({"opacity": .5 });
	$('#demohover img').hover(function() {
		$(this).stop().animate({ "opacity": 1 });
	}, function() {
		$(this).stop().animate({ "opacity": .5 });
	});
});