Question

我想实现这个菜单： http://www.sundoginteractive.com/sunblog/posts/jquery-hover-box 在我的项目中。

我用简单的HTML测试它并且它工作正常，但如果我投入到我的项目中它没有。问题是，我悬停在其上的文本的HTML部分应该是一个javascript函数返回部分，如下所示：

function formatHits ( data ) {
    return '<a href="#" class="popper" data-popbox="pop1">test</a>'+
'<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" width="100%">'+
    '<tr>'+ 
Some table stuff...
        '</tr>'+
    '</table>'
}

如果我把

<a href="#" class="popper" data-popbox="pop1">test</a>

进入我的HTML的正文部分它可以工作，但它在错误的地方（而不是动态）。谢谢！：）

将鼠标悬停在此元素上的功能与上述相同：

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


});

});

此外，我想显示的元素是否悬停在上面的文本上是在正文部分中：

    <div id="pop1" class="popbox"><h2>Success!</h2><p>This is an example popbox.</p>  </div>

CSS是：

.popbox {
display: none;
position: absolute;
z-index: 99999;
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;
}

顺便说一下。这主要是上面链接的代码！

javascript对返回的HTML代码无效

0 个答案: