悬停下拉菜单上的 JavaScript

Question

我是 JavaScript 新手，我需要有关这个简单脚本的帮助。

这是一个购物车下拉菜单，当前在单击该字段时起作用。我想要下拉菜单在鼠标悬停时淡入。我尝试添加 .hover 而不是 .live，还尝试在“单击”后添加鼠标，但没有任何效果。任何帮助将不胜感激。谢谢!

javascript/jQuery

$('#cart > .heading a').live('click', function() {
  $('#cart').addClass('active');

  $('#cart').load('index.php?route=module/cart #cart > *', function() {$( "#cart .content" ).fadeIn( "slow" );});

  $('#cart').live('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;
}

Answer 1

使用以下内容，防止 href 的默认行为，例如单击。使用 on 而不是 live

$('#cart > .heading a').on('hover', function(e) {
  e.preventDefault();   
  $('#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();
  });
});