CODEWITHSUNDEEP
jqueryclickmouseover
Jesse Schoff
Jesse Schoff

Reputation: 770

Require another click for mouseover function

I'm trying to make a bar on the top of a page that once clicked, allows the user to change the background color of the page by mousing over a div. The problem is, this bar stays active indefinitely, so that if the user unintentionally mouses over the bar again, the color will change.

I'd like the user to have to click again to reactivate the mouseover functions.

I have a simplified version of what I'm using on jsfiddle.

Here is the script: 

 $(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");
    });
});

Upvotes: 0

Views: 174

Answers (1)

Siwei Kang
Siwei Kang

Reputation: 186

You need to unbind your mouseover event somehow. One way to do it:

change your config to this:

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)
}

Upvotes: 2

Related Questions