onMouseOver 悬停时无法正常工作

Question

我试图通过调用以下函数 onMouseOver

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 上时获得弹出窗口 h 是我发送到该函数的一些数字

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

，但 onMouseOver 不起作用悬停即可 我该怎么办？

提前感谢一万亿... 莉娜

Answer 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 属性中。

希望这有帮助。

Answer 2

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

$('#popups').hover(function(){
    // your task hover
});

Answer 3

这是一个简单的示例 - 看看您是否注意到自己的做法有所不同

Hover Over Me

$('#box').hover(
  function(evt){
    // code
  }
);

Answer 4

感谢您的回答:)

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

<div id="task_" + dynamicNumber> <div onMouseOver="PopUp(" + dynamicNumber + ");"> </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()

Answer 5

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