Nick Nick - 7 months ago 25
Javascript Question

jQuery.hover causing blinking effect

I have two images, one of which is very small and is superimposed over the other. When I hover over the larger image, the second image should appear on top of it. This works great. Unfortunately, when I move my mouse over the smaller image (which, remember, is on top of the larger image), the screen blinks wildly. The system thinks I am leaving the larger image when I am actually not. Let me post some code.

<li id="li-{{ photo.id }}">
<div class="photo-container">
<img class="photo" src="{{ photo.thumbnailFile.url }}"/>
<img class="delete-button" src="{{ STATIC_URL }}delete_photo.jpg "/>
</div>
</li>

function DisplayPhotoOptions() {
$("#personal-photo-list .photo").hover(function(event) {
$(this).fadeTo("fast", 0.5);
$(this).next(".delete-button").css("visibility", "visible");
}, function() {
$(this).fadeTo("fast", 1.0);
$(this).next(".delete-button").css("visibility", "hidden");
});

(function() {
$(document).ready(function() {
DisplayPhotoOptions()
});
})();


Does anyone know how to resolve this problem?

Answer

Cursor is leaving larger image because .delete-photo is not its child.

Try binding hover to .photo-container.

Comments