0

一度クリックしたページの上部にバーを作成しようとしています。これにより、ユーザーは div にマウスを移動してページの背景色を変更できます。問題は、このバーが無期限にアクティブなままであるため、ユーザーが意図せずにバーに再びマウスを合わせると、色が変わることです。

マウスオーバー機能を再度有効にするには、ユーザーがもう一度クリックする必要があるようにしたいと思います。

jsfiddleで使用しているものの簡略化されたバージョンがあります。

スクリプトは次のとおりです。

 $(function () {
    config = {
        sensitivity: 3,
        interval: 200,
        timeout: 500,
        over: function () {
            $('#colorBar').animate({
                "height": "50px"
            }, 500);
        },
        out: function () {
            $('#colorBar').animate({
                "height": "20px"
            }, 200);
        }
    }
    $('#colorBar').hoverIntent(config)
});

$("#colorBar").click(

function () {
    $("#red").mouseover(

    function () {
        $("body").css("background-color", "red");
    });
    $("#green").mouseover(

    function () {
        $("body").css("background-color", "green");
    });
    $("#blue").mouseover(

    function () {
        $("body").css("background-color", "blue");
    });
    $("#yellow").mouseover(

    function () {
        $("body").css("background-color", "yellow");
    });
});
4

1 に答える 1

2

どうにかして mouseover イベントのバインドを解除する必要があります。それを行う1つの方法：

設定を次のように変更します。

config = {
    sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
    interval: 200, // number = milliseconds for onMouseOver polling interval
    timeout: 500, // number = milliseconds delay before onMouseOut
    over: function() { $('#colorBar').animate({"height": "50px"}, 500); }, // function = onMouseOver callback (REQUIRED)
    out: function() { $('#colorBar').animate({"height": "20px"}, 200); $('.color').unbind("mouseover"); } // function = onMouseOut callback (REQUIRED)
}
于 2012-08-22T04:25:11.567 に答える