I'm sure I'm overlooking something but I can't seem to get the "mouseleave" event to fire after I replace the html within the anchor tag that triggered the mouseenter.
Adding code here but really it's much simpler if you visit the JSFiddle link below and hover over the star icons.
$(document).ready(function () {
$(document).on('mouseenter', '[id^=star-]', function () {
$('[id^=star-]').html('<span class="star star-empty"></span>');
}).on('mouseleave', '[id^=star-]', function () {
$('[id^=star-]').html('<span class="star star-full"></span>');
});
});
Please see JSFiddle here. Simply hover over the star icons and you shall see what I mean.
The mouseleave event works when added
.star {
display: block;
}
in CSS
Update: Javascript:
$(document).ready(function () {
$('.rating').on('mouseenter', 'a[id^=star-]', function () {
console.log('Hello');
$(this).children('span').addClass('star-empty').removeClass('star-full');
}).on('mouseleave', 'a[id^=star-]', function () {
console.log('leave');
$(this).children('span').addClass('star-full').removeClass('star-empty')
});
});