onMouseOver не работает нормально с hover

Question

Я пытаюсь получить всплывающее окно при наведении курсора на div путем вызова следующей функции 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 (some attributes) onMouseOver="PopUp('+someNumber+');">

но onMouseOver не работает нормально с парением что мне делать?

спасибо триллион заранее ... Lina

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

Спасибо за ваши ответы:)

Я решил проблему с помощью jquery cluetip, который гораздо более гибкий и практичный. + я добавил еще один внутренний 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()

Answer 3

Используйте jQuery.bind() или jQuery.live().

Answer 4

Вот простой пример - посмотрите, замечаете ли вы, что делаете по-другому

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

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

Answer 5

Почему бы не прикрепить всплывающую функцию к эффекту наведения div? Предполагая, что у div есть id "popups".

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