Question

当我将鼠标悬停在某些城市名称上时，我正试图在所有内容上显示弹出框。它似乎与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);

这是CSS

.popbox {
position: absolute;
display: none;
z-index: 999;
width: 400px;
padding: 10px;
background: #EEEFEB;
color: #000000;
border: 1px solid #4D4F53;
margin: 0px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
}
.popbox h2
{
background-color: #4D4F53;
color:  #E3E5DD;
font-size: 14px;
display: block;
width: 100%;
margin: -10px 0px 8px -10px;
padding: 5px 10px;
}

这是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.

似乎没有这段代码

$('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);


});

弹出框出现并消失就好了。有什么想法吗？

Answer 1

检查JS控制台是否有错误。有一些。但是，在任何事情准备就绪之前让JavaScript自行执行并不是一个好主意。

而是尝试将其全部挂在文档就绪事件中。

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

我把这一切都放在你的小提琴里：http://jsfiddle.net/wh2zxd2z/

这是预期的结果吗？

Answer 2

它应该有用...... See

我认为你错过了Jquery应该加载到顶部。

弹出窗口的宽度应为自动。除非它会扩大窗口。

.popbox {
  width: auto;
  ...

悬停时不会显示弹出框

2 个答案: