0

ツールチップ用のおもちゃのコードがあります。ツールチップにマウスを合わせると、このロジックで非表示になることを除いて、問題なく動作します。

ツールチップにマウスを置いたときにツールチップが表示されたままになり、両方の領域からマウスを外したときにツールチップが消えるようにするためのきれいな方法を見つけようとして、頭を悩ませています。誰にも提案がありますか？

例を参照してください。

HTML

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

Javascript

var div1 = $("#div1");
var div2 = $("#div2").hide();

var hoverTimer;
div1.mouseenter(function(e) {
    var x = e.pageX;
    var y = e.pageY;
    div1.mousemove(function(e) {
        x = e.pageX;
        y = e.pageY;
    });
    hoverTimer = window.setTimeout(function() {
        div2.css("left", x);
        div2.css("top", y);
        div2.show();
    }, 400);
});

div1.mouseleave(function(e) {
    window.clearTimeout(hoverTimer);
    div2.hide();
});

CSS

#container {
    position: relative;
}
#div1 {
    float: left;
    clear: none;
    width: 200px;
    height: 200px;
    background-color: green;
}
#div2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: blue;
}
4

2 に答える 2

4

イベントを作成しますが、mousemove2 つの変数を設定する以外に、ツールチップを実際に移動することはありません。代わりにこれを試してください。マウスの位置に 16 ピクセルの「マージン」を追加したことに注意してください。これは、実際のツールチップとよりインラインになるようにするためであり、ちらつき効果を防ぎます。

于 2012-06-15T21:19:18.693 に答える