Javascript 弹出框不显示'；悬停不显示

当我把鼠标悬停在一些城市的名字上时，我正试图在所有东西的上方显示一个弹出框。 当z-index设置为999和position:absolute时，它似乎没有重叠，甚至没有显示。 这是jQuery脚本

$(function() {
var moveLeft = 0;
var moveDown = 0;
$('a.popper').hover(function(e) {

    var target = '#' + ($(this).attr('data-popbox'));

    $(target).show();
    moveLeft = $(this).outerWidth();
    moveDown = ($(target).outerHeight() / 2);
}, function() {
    var target = '#' + ($(this).attr('data-popbox'));
    $(target).hide();
});

$('a.popper').mousemove(function(e) {
    var target = '#' + ($(this).attr('data-popbox'));

    leftD = e.pageX + parseInt(moveLeft);
    maxRight = leftD + $(target).outerWidth();
    windowLeft = $(window).width() - 40;
    windowRight = 0;
    maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 20);

    if(maxRight > windowLeft && maxLeft > windowRight)
    {
        leftD = maxLeft;
    }

    topD = e.pageY - parseInt(moveDown);
    maxBottom = parseInt(e.pageY + parseInt(moveDown) + 20);
    windowBottom = parseInt(parseInt($(document).scrollTop()) + parseInt($(window).height()));
    maxTop = topD;
    windowTop = parseInt($(document).scrollTop());
    if(maxBottom > windowBottom)
    {
        topD = windowBottom - $(target).outerHeight() - 20;
    } else if(maxTop < windowTop){
        topD = windowTop + 20;
    }

    $(target).css('top', topD).css('left', leftD);


});

})(jQuery);

这是HTML

<div id="pop1" class="popbox">
<h2>Youth Academy Bucuresti</h2>
<p>Membri:</p>
</div>
<div id="pop2" class="popbox">
<h2>Youth Academy Piatra Neamt</h2>
<p>Membri</p>
</div>
These are the cities: <a href="#" class="popper" data-popbox="pop1">Bucuresti</a>, <a href="#" class="popper" data-popbox="pop2">Piatra Neamt</a> etc.

布库雷斯蒂青年学院
Membri：

皮亚特拉·尼姆青年学院
蒙布里

这些是城市：，等等。

似乎没有这段代码

$('a.popper').mousemove(function(e) {
var target = '#' + ($(this).attr('data-popbox'));

leftD = e.pageX + parseInt(moveLeft);
maxRight = leftD + $(target).outerWidth();
windowLeft = $(window).width() - 40;
windowRight = 0;
maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 20);

if(maxRight > windowLeft && maxLeft > windowRight)
{
    leftD = maxLeft;
}

topD = e.pageY - parseInt(moveDown);
maxBottom = parseInt(e.pageY + parseInt(moveDown) + 20);
windowBottom = parseInt(parseInt($(document).scrollTop()) + parseInt($(window).height()));
maxTop = topD;
windowTop = parseInt($(document).scrollTop());
if(maxBottom > windowBottom)
{
    topD = windowBottom - $(target).outerHeight() - 20;
} else if(maxTop < windowTop){
    topD = windowTop + 20;
}

$(target).css('top', topD).css('left', leftD);


});

$（'a.popper'）.mousemove（函数（e）{
var target='#'+（$（this.attr（'data-popbox'））；
leftD=e.pageX+parseInt（moveLeft）；
maxRight=leftD+$（目标）.outerWidth（）；
windowLeft=$（window）.width（）-40；
windowRight=0；
maxLeft=e.pageX-（parseInt（moveLeft）+$（target.outerWidth（）+20）；
如果（maxRight>windowLeft&&maxLeft>windowRight）
{
leftD=maxLeft；
}
topD=e.pageY-parseInt（向下移动）；
maxBottom=parseInt（e.pageY+parseInt（moveDown）+20）；
windowBottom=parseInt（parseInt（$（document.scrollTop（））+parseInt（$（window.height（））；
maxTop=topD；
windowTop=parseInt（$（document.scrollTop（））；
如果（maxBottom>windowBottom）
{
topD=windowBottom-$（目标）.outerHeight（）-20；
}else if（maxTop

弹出框出现并消失得很好。

---

有什么想法吗？

检查JS控制台是否有错误。有一些。 然而，在一切准备就绪之前让JavaScript自行执行不是一个好主意

相反，尝试在document ready事件中将其全部连接起来

$(document).ready(function () { 
  Your foo..
});

我已经为你把这一切整理好了：

这是预期的结果吗

它应该有用

我认为您错过了Jquery应该加载到顶部的部分

弹出窗口的宽度应该是自动的。除非它会扩展窗口

.popbox {
  width: auto;
  ...

---

带有

popper

类的

a

标记在哪里？我现在编辑了这个问题，我没有正确格式化html代码。很抱歉，这对我有用，也许你没有在其他代码之前加载jquery代码。jQuery必须始终在页面顶部加载。为避免弹出窗口扩展，应将.popbox css宽度更改为auto.。仍然不显示。imgur.com/a/yjioR jQuery加载正确我在编写jQuery脚本时编写了它，没有任何内容。看看相册的最后两张照片，在我注意到的第一张照片中，您已经加载了两次jQuery。一次来自谷歌CDN，另一次来自你的目录。这可能会导致意外行为。您能否提供页面的完整设置？否则查找错误会很复杂。请检查浏览器的JavaScript开发人员控制台以查找错误。在大多数情况下，它会告诉你你的代码有什么问题（但有时它有点神秘；），这可能是css/js文件之间的某种冲突吗？不，js和css之间不存在冲突的可能性。将其设置为自动，tho'，但弹出窗口不会显示。我认为问题在于js中的变量moveLeft。。因此，设置moveLeft=5；默认情况下。。让我知道它有效吗？看到了吗？它对我有效你的问题解决了吗？是的，用了上面小提琴的来源。没有。这一定是我找不到的CSS问题（取消所有其他JS文件的注释表明它们之间没有任何冲突）。

.popbox {
  width: auto;
  ...