Question

我使用jquery悬停显示项目详细信息然后用户将鼠标悬停在此页面上的项目上 - 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')
});

Jquery悬停bug？

2 个答案: