Hi there, I'm just starting out with javascript and could use some help with a simple script.
I have a shopping cart drop down that currently activates when clicked. However, I want it to fade in when hovered over instead. I've tried using .hover instead of .live and adding 'mouse in' after 'click', but those changes didn't work. Any assistance you can provide would be greatly appreciated. Thank you!
javascript/jQuery
$('#cart > .heading a').on('click', function() {
$('#cart').addClass('active');
$('#cart').load('index.php?route=module/cart #cart > *', function() {$( "#cart .content" ).fadeIn( "slow" );});
$('#cart').on('mouseleave', function() {
$(this).removeClass('active');
$( "#cart .content" ).hide();
});
});
css
#header #cart .content {
clear: both;
display: none;
position: relative;
padding: 8px;
min-width: 300px;
border: 5px solid #D84D7F ;
background: #FFF;
}
#header #cart.active .heading {
}
#header #cart.active .content {
display: block;
}