Question

我有一个页面，其中的元素会在其下方或上方显示悬停框，具体取决于它们是否适合页面下方。它工作正常，除非x滚动条可见，在这种情况下，即使滚动条阻碍了框，框仍然可以出现在元素下方。证明这一点。你可以访问这个jsFiddle，然后慢慢地从输入的顶部到底部盘旋，我想你会明白我的意思。这真的只是一个小错误，但如果有人知道如何，我想解决它。谢谢。这是Javascript：

$(document).mousemove(function(e) {
 leftX=(e.pageX -($('#box').width()+20)) + "px";

if((e.pageY+($('#box').height() + 31)) < ($(window).scrollTop() + window.innerHeight)){
   topY = (e.pageY + 20) + "px";
}else{
   topY=e.pageY - $('#box').height() - 20 + "px";
}

  $('#box').css({'top':topY,'left':leftX});

});

$('input').mouseout(function(){
    $('#box').hide();
});

$('input').mouseover(function(){
    $('#box').show();
});

Answer 1

好的：试试这个： JSFIDDLE

首先，你忘了结束p tag，但我猜这只是小提琴而不是你的实际代码。

其次我不确定您是否希望pink box在hover上从right to left移动到输入框中。所以我做了fixed length - hard coded。

以下是你可以做的事情：

IN JS

 $('#box').css({'top':topY,'left':'29px'});

和

 topY = (e.pageY + 24) + "px";

和

 topY=e.pageY - $('#box').height() - 24 + "px";

现在，如果你不想硬编码，我改变了leftX变量计算如下：

 leftX=(e.pageX -($('#box').width()-120)) + "px";

然后使用leftX：

 $('#box').css({'top':topY,'left':leftX});

x滚动条阻碍悬停框

1 个答案: