0

このコードが機能しない理由を理解するのに苦労しています。私の意図は、ユーザーがツールチップ div をクリックしたときにメッセージを表示することです。マウス カーソルを div の外に移動すると、ツールチップが閉じます。単一のページにメッセージを表示する最も簡単な方法が必要です。jquery 1.3.2 を使用する必要があります。ありがとうございました

<html>
<head>
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $('.wrapper').live('click', showBox).live('mouseleave', hideBox);

    function showBox(e){
        var x = e.pageX + 20;
        var y = e.pageY + 20;
        $('.tooltip').fadeIn();
        $('.tooltip').offset({ left: x, top: y });
    }
});

function hideBox(){
    $('.tooltip').fadeOut();
}

</script>
<style>
  .div{ margin:10px;padding:12px;
         border:2px solid #666;
         width:60px;
       }
  </style>
</head>
<body>
<div class="wrapper">sometext</div>
<div class="tooltip">tooltip1</div>
</body>
</html>

編集: これは Juan Mendes による作業コードですhttp://jsfiddle.net/HUG2Z/3/

4

1 に答える 1

2

liveonを使用している理由がわかりませんmouseleave。コードの残りの部分を見なければ、それを使用しても意味がありませんclick。liveは何らかの理由でバージョン 1.7 で非推奨になっているため、その動作と欠点を本当に理解していない限り、使用しないでください。

次のコードは動作しますhttp://jsfiddle.net/HUG2Z/1/

$(document).ready(function(){

    $('.somefield').click(showBox).mouseleave(hideBox);

    function showBox(e){
        var x = e.pageX + 20;
        var y = e.pageY + 20;
        $('.tooltip').fadeIn();
        $('.tooltip').offset({ left: x, top: y });
    }

    function hideBox(){
        $('.tooltip').fadeOut();
    }
});

これが必要な場合は、jsfiddle を変更してシナリオをより適切に表し、質問に投稿してください (ここではコメントとしてではありません)。

于 2012-11-16T17:43:51.013 に答える