JSBIN

Question

我有一个关于鼠标悬停和鼠标离开功能的问题。

在此 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功能。这样，在关注元素之后，如果用户离开元素，它就会隐藏。

Jquery mouseover和mouseleave

3 个答案:

JSBIN