Reputation: 851
I have this image:
<img src="..." class="scroller_poster" alt="Some information about movie">
... and I'm trying to display the value in ALT in a DIV elsewhere on my page:
<div class="scroller_movie_data"></div>
... using this function (contained in $(document).ready):
$('.scroller_poster').mouseenter(function() {
var movie_data = $(this).attr('alt');
if (movie_data) {
$('.scroller_movie_data').html(movie_data);
$(this).mouseleave(function() {
$('.scroller_movie_data').html('');
});
}
});
This works in all browsers except Firefox and I cannot figure out why. Can somebody shed some light on this please?
NOTE:
The image that gets hovered sits inside a jQuery plugin (SmoothDivScroll), which I believe is causing the problem.
Below is a screenshot on what I am working on, it might help understand what I'm doing. Where it says "Madagascar 3: Europe's Most Wanted (2012)" is where I'm trying to get each hovered ALT value to show.
Upvotes: 0
Views: 1845
Reputation: 318172
You probably should'nt rebind the mouseleave function everytime you mouseenter the element, as that will cause the event to be bound multiple times :
$(document).on({
mouseenter: function() {
var movie_data = $(this).attr('alt');
if (movie_data.length) $('.scroller_movie_data').html(movie_data);
},
mouseleave: function() {
$('.scroller_movie_data').html('');
}
}, '.scroller_poster');
Upvotes: 1
Reputation:
Why do you have the mouseleave event inside the mouseenter event? It's very bad practice and can create multiple event handlers.
Use the hover method in jquery(first function is mouseenter, second function is mouseout):
$('.scroller_poster').hover(
function() {
var movie_data = $(this).attr('alt');
if (movie_data)
$('.scroller_movie_data').html(movie_data);
},
function() {
$('.scroller_movie_data').html('');
});
Upvotes: 1