javascript - onMouseOverがホバーで正常に機能しない

Question

次の関数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ホバーでうまく機能していません。どうすればよいですか？

事前に1兆に感謝します...リナ

score 1 · Accepted Answer

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ホバーをトリガーするコントロールの属性に保存するだけです。

お役に立てれば。

score 0 · Accepted Answer

あなたの答えをありがとう:)

はるかに柔軟で実用的な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()

score 0 · Accepted Answer

div のホバー効果にポップアップ機能を付けてみませんか? div の ID が「popups」であると仮定します。

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

score 0 · Accepted Answer

ここに簡単な例があります-あなたが違うことをしていることに気づいたかどうか見てください

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

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

score 0 · Accepted Answer

0

jQuery.bind()またはを使用しjQuery.live()ます。

于 2010-03-17T15:42:10.833 に答える

javascript - onMouseOverがホバーで正常に機能しない

5 に答える 5

Related

Reference