Question

What is the right way to attach both hover and onclik functionality on the same div?

Here’s what I tried but it didn’t work (clicking does nothing):

$(function outlineHider(){
    $("#hotspot").hover(
        function() {
            $("#outlines").show(); //showing another div element
            function bindClick() {
                $("#hotspot").click(callAnotherFunction())};
            }, 
            function() {
                $("#outlines").hide();
            }
        );  
}); 

Answer 1

Try this:

$(function() { // document ready handler shortcut
    $("#hotspot").hover(
        function() { $("#outlines").show(); }, 
        function() { $("#outlines").hide(); }
    ).click(function() {
        callAnotherFunction()
    }); 
}); 

Or a shorter version, with thanks to @VisioN:

$(function() {
    $("#hotspot")
        .hover(function() { $("#outlines").toggle(); })
        .click(callAnotherFunction);    
});