jquery - Jquery悬停错误？

Question

我使用 jquery hover 来显示项目详细信息，然后用户将鼠标悬停在此页面上的项目上 - dev.oyehabla.com 问题是，然后鼠标离开项目细节必须隐藏但有时它们仍然存在......是 jquery 错误还是我'我做错了什么？我使用这段代码：

jQuery('#big_container .item-image').hover(function(){
   var $opt = $(this);
   $item_id = $opt.attr("id");
   $post_id = $item_id.split('-');
   jQuery('#'+$item_id + ' .media_block .post-detail').show();
   console.log($item_id + 'mouseover')
},function(){
   var $opt = $(this);
   $item_id = $opt.attr("id");
   $post_id = $item_id.split('-');
   jQuery('#'+$item_id + ' .media_block .post-detail').hide();
   console.log($item_id + 'mouseout')    
});

Answer 1

您可能应该为此使用 CSS 而不是 jQuery，特别是如果您只是显示/隐藏 div。先试试这个：

$('#big_container .item-image').hover(function(){
   var $opt = $(this);
   $opt.find('.post-detail').show();
},function(){
   var $opt = $(this);
   $opt.find('.post-detail').hide();
});

这可能会解决您的问题。使用 CSS 的更好版本：

#big_container .item-image .post-detail {
  display: none;
}

#big_container .item-image:hover .post-detail {
  display: block;
}

Answer 2

您不需要整个功能..只需使用这部分

jQuery('#big_container .item-image').hover(function(){
   var $opt = $(this);
   $item_id = $opt.attr("id");
   $post_id = $item_id.split('-');
   jQuery('#'+$item_id + ' .media_block .post-detail').stop().show();
   console.log($item_id + 'mouseover')
});