Question

I have set up my page so that when the user hovers over an image a text shows up and some bubbles. There are eleven images of fish and each one has its own text and bubble. I made sure that there is no overlap in the divs containing the fish, but when one hovers over a particular image the text of some of the other images show up too. This is too distracting since the user would want to see one text at a time. How can I solve this issue? Here is the link to the page: http://arabic001.com/colors

Answer 1

I’m curious myself as to what the common solution is to this problem.
When I run across this situation I use hoverIntent plugin for jquery.

if you went this route, you would change each .mouseOver(),.mouseOut() to the following:

from this

          $('#fishBlue').mouseover(function() {     
                $('#bubblesBlue').toggle('slow');
                $('#textBlue').toggle('slow');
            });

            $('#fishBlue').mouseout(function() {                
                $('#bubblesBlue').hide('slow');
                $('#textBlue').toggle('slow');
            });

to this

$('#fishBlue').hoverIntent(function() {
                $('#bubblesBlue').toggle('slow');
                $('#textBlue').toggle('slow');
            });
}, function() {
                $('#bubblesBlue').hide('slow');
                $('#textBlue').toggle('slow')
});

note

that the hoverIntent plugin requires at least jquery 1.5.1

other tip

I would abstract things a bit more, why rewrite the same thing for each fish.

perhaps use classes

$('.fish').hoverIntent(function() {
                $(this).next('.bubble').toggle('slow');
                $(this).next('.text').toggle('slow');
            });
}, function() {
                $(this).next('.bubble').hide('slow');
                $(this).next('.text').toggle('slow')
});