Q:

Combining Hover and Click jQuery Functionality

In a section of my site, I display information when the user hovers over a link. Then, when the user mouseleaves the link, the display information should leave. Here is the code for this:
function hover_user(id_user){
   $("#user"+id_user).mouseleave(function(){
     displayinfo();
   });
}

How do I add a click functionality so that when the user clicks on the link,  the mouseleave is ignored and the information is displayed there until the user decides to mouseover another link?
Thanks!

A:

$("a[id^='user']")
    .on("mouseenter", function(){
        displayinfo( $(this) ); // show info on mouseover
    })
    .on("mouseleave", function(){
        // code to hide info on mouseout here
    })
    .on("click", function(){
        $(this).off("mouseleave"); // unbind the mouseout onclick
    });

Example.
We're binding the displayinfo(); function to the mouseenter event of the element. We then bind a function that hides the info to the mouseout event.
The last on() function is bound to the click event of the element, and removes the mouseleave handler. So, after it's been clicked, it will not disappear when the mouse is removed.

