Jquery和mouseleave

Question

关于鼠标控制和鼠标保存功能，我有一个问题。

在这个演示页面中，您可以看到一张图片。当你在缪斯上空盘旋时，你可以看到悬停卡。里面的悬停卡有点击跟随链接。但是您不能单击该链接，因为当您在该链接上按鼠标时，悬停卡将被关闭。我怎样才能解决这个问题。有人能帮我吗？

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函数。这样，在专注于元素之后，如果用户离开元素，它就会隐藏。