Nick Nick - 10 months ago 56
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-{{ }}">
<div class="photo-container">
<img class="photo" src="{{ photo.thumbnailFile.url }}"/>
<img class="delete-button" src="{{ STATIC_URL }}delete_photo.jpg "/>

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() {

Does anyone know how to resolve this problem?


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

Try binding hover to .photo-container.