I’m having trouble with an exercise and it seems the code archive file acts the same way.
On p.168 the 2nd paragraph says “We are also adding the class to the trigger link to style it, as its hover style would otherwise switch off when the overlay came between it and the cursor.”
$(document).ready(function(){
$('<div></div>')
.attr('id', 'overlay')
.css('opacity', 0.65)
.hover(function(){
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
setTimeout(function(){
$('#overlay:not(.active)').slideUp(function(){
$('a.cart-hover').removeClass('cart-hover');
});
}, 800);
}).appendTo('body');
$('.cart a').mouseover(function(){
$(this).addClass('cart-hover');
$('#overlay:not(:animated)')
.addClass('active')
.html('<h1>You have 5 items in your cart.</h1><a href="#">View Cart</a> <a href="#">Checkout</a>')
.slideDown();
});
});
When I move the mouse over the cart icon I get the background-position change on the cart icon and the overlay displays, but as soon as I move my cursor the <a> on that cart icon loses its background-position and the little arrow disappears.
I tried everything I could think of, like removing the class and adding back in… it was a good learning to try and debug, but in the end I couldn’t get the cart with the arrow graphic to stay positioned. Anyone else having trouble with this specific piece of code in that exercise?