0

我试图通过调用以下函数 onMouseOver 在悬停 div 时获得一个弹出窗口

function PopUp(h) {
    $('#task_' + h).hover(function (evt) {
        var html1 = '<div id="box">';
        html1 += '<h4>Taskbar ' + h + ' ännu en test - fredagstest </h4>';
        //html += '<img src="Pictures/DesertMini.jpg" alt="image"/>';
        html1 += '<p>"Test för task nr: ' + h + ' <br/>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium asperiores repellat."</p>';
        html1 += '</div>';
        $('#test').append(html1).children('#box').hide().fadeIn(100)
        $('#box')
            .css('top', evt.pageY)
            .css('left', evt.pageX + 20)
            .css('z-index', 1000000);
        }, function () {
            // mouse out
            $('#box').remove();
        });
        $('#task_' + h).mousemove(function (evt) {
            $('#box')
                .css('top', evt.pageY)
                .css('left', evt.pageX + 20)
                .css('z-index', 1000000);
        });
    }
}

h是我发送给函数的一些数字

<div (some attributes) onMouseOver="PopUp('+someNumber+');">

但是onMouseOver悬停不能正常工作我该怎么办？

提前一万亿谢谢...丽娜

4

5 回答 5

1

你得到一个javascript错误吗？

您似乎在以下行中也缺少分号：

$('#test').append(html1).children('#box').hide().fadeIn(100)

这是我使用的扩展的提示（它非常基本但效果很好）：

jQuery.fn.ToolTip =
function()
{
    return this.each(function()
    {
        $(this).mouseover(function(e)
        {
            // Grab the title attribute value and assign it to a variable
            var tip = $(this).attr('title');
            // Remove the title attribute to avoid the native tooltip from displaying
            $(this).attr('title', '');
            // Append the tooltip div
            $('body').append('<div id="tooltip_container">' + tip + '</div>');
            // Set the X and Y of the tooltip
            $('#tooltip_container').css('top', e.pageY + 10);
            $('#tooltip_container').css('left', e.pageX + 10);
        }).mousemove(function(e)
        {
            // Make the tooltip move along with the mouse
            $('#tooltip_container').css('top', e.pageY + 10);
            $('#tooltip_container').css('left', e.pageX + 10);
        }).mouseout(function()
        {
            // Put back the title attribute value
            $(this).attr('title', $('#tooltip_container').html());
            // Remove the appended tooltip template
            $('body').children('div#tooltip_container').remove();
        });
    })
};

那么用法是：

<img ID="someImageWithHover" src="someImage.jpg" title="Tip I want to show!" />

$('#someImageWithHover').ToolTip();

工具提示的 CSS：

#tooltip_container
{   
    position:absolute;   
    z-index:9999;   
    color: #000000;
    background: #eaf2fa;
    width:240px; 
    padding: 4px 8px;
    margin: 0;
    border: 2px solid #2F4F88;
}

您只需将要在悬停工具提示中显示的任何 html 存储在title触发悬停的控件的属性中。

希望这可以帮助。

于 2010-03-17T15:41:33.320 回答
0

为什么不将弹出功能附加到 div 的悬停效果？假设 div 的 id 为“popups”。

$('#popups').hover(function(){
    // your task hover
});
于 2010-03-17T15:37:02.933 回答
0

这是一个简单的例子——看看你是否注意到你正在做的不同

<div id="box">Hover Over Me</div>

$('#box').hover(
  function(evt){
    // code
  }
);
于 2010-03-17T15:38:17.680 回答
0

使用jQuery.bind()或jQuery.live()。

于 2010-03-17T15:42:10.833 回答
0

感谢您的回答:)

我通过使用更加灵活和实用的 jquery 线索提示解决了这个问题。+ 我在外部 div 中添加了另一个内部 div，因此代码现在如下所示：

<div id="task_" + dynamicNumber> <div onMouseOver="PopUp(" + dynamicNumber + ");">&nbsp;</div> </div>

 function PopUp(h) {
           $('#task_' + h).attr('title', '|id= ' + h + '  hello!');
           $('#task_' + h).cluetip({
               splitTitle: '|',
               showTitle: false,
               positionBy: 'mouse',
               cursor: 'pointer',
               cluezIndex: 500000
           });
       } //end PopUp()
于 2010-03-18T09:51:35.020 回答