jQuery mouseover 和 mouseleave

Question

我有一个关于 mouseover 和 mouseleave 功能的问题。

在这个DEMO页面你可以看到有一张图片。当您将鼠标悬停在缪斯上时，您可以看到悬停卡。里面的hovercard有点击链接。但是您不能单击该链接，因为当您在该链接上鼠标离开时，悬停卡将被关闭。我怎么解决这个问题。有人可以帮我吗？

Jquery 代码在这里：

$(document).ready(function(){ 
function showProfileTooltip(e, id){ 
e.append($('.p-tooltip').css({ 
'top':'20', 
'left':'80' 
}).show()); 
//send id & get info from go_card.php 
$.ajax({
    url: 'go_card.php?uid='+id,
    beforeSend: function(){
    $('.p-tooltip').html('Yükleniyor..');
},
success: function(html){ 
$('.p-tooltip').html(html); 
} 
}); 
} 

function hideProfileTooltip(){ 
$('.p-tooltip').hide(); 
} 

$('.summary a').mouseover(function(e){ 
var id = $(this).attr('data-id'); 
showProfileTooltip($(this), id); 
}); 

$('.summary').mouseleave(function(){ 
hideProfileTooltip(); 
});
});

和 HTML 代码：

<div class="paylasilan-alani">
     <div class="paylasan-profil-fotosu profile">
        <div class="summary" id="summary1" data-id="7"><a href="#" class="" data-id="7"><img src="http://www.designbolts.com/wp-content/uploads/2013/11/Frozen-Movie-poster-payoff-Wallpaper-HD1.jpg" width="64" height="64"/></a></div>
         </div>
    <div class="paylasilan">Some text here.</div>
 </div>

Answer 1

问题在于.mouseover() 函数一遍又一遍地触发ajax 调用。

根据.mouseover() 的文档：

This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for .mouseenter() for a useful alternative.

改为切换到.hover()。您也可以使用回调来处理 mouseleave() 功能：

$('.summary a').hover(function(e){ 
   var id = $(this).attr('data-id'); 
   showProfileTooltip($(this), id); 
}, function(){
   hideProfileTooltip(); 
}); 

另外，您正在使用的插件正在向.summary 添加内联样式，而scroll-to-fixed-fixed 类将.summary 设置为z-index:0。 z-index 属性由它的子元素继承，这导致您的弹出窗口位于其他元素后面。我要么查看插件的 JS 文件并删除它，要么在你的 CSS 中通过添加覆盖它：

.summary{
   z-index: 1 !important;
} 

Answer 2

JSBIN

function hideProfileTooltip(){ 
  $('.p-tooltip').hide(); 
} 

$('.summary a').mouseover(function(e){ 
  var id = $(this).attr('data-id'); 
  showProfileTooltip($(this), id); 
}); 

$('.summary').mouseleave(function(){ 
  hideProfileTooltip(); 
});

这是您的问题代码。达到你的目的。关键是当你的光标移动到.p-tooltip时触发函数ummary.mouseleave时.p-tooltip不会消失，但是当你的光标移动到其他地方时。 .p-tooltip 应该消失了。

所以我创建了一个JSBIN 来模拟您的问题。 jsbin 只是模拟您的问题。这只是一种使用 HTML 结构来解决您的问题的方法。我相信还有另一种方法可以解决它。但是使用这种结构是一种简单的方法。所以，我建议你应该重新绘制你的 HTML，特别注意父子关系。

就是这样。

Answer 3

你需要在鼠标输入函数中指定mouseleave函数。这样，在关注元素后，如果用户离开该元素，它就会隐藏。