Calling javascript function on the Mousehoever and mouseout using jQuery

Question

I want to call the javascript function using mousehover jQuery event.

Here is the one function.

// On mouse hover function     
 function ShowHighlighter(d, highlight_elid) {
            //alert ("ShowHighlighter\n"+d);
            if (d == "addHighlight") {
                var txt = getSelText();
                if (txt.length < 1)
                {
                    return;
                }
                ShowContent(d);
            } else if (d == "deleteHighlight") {
                var elid = "#"+d;
                jQuery(elid).stop();
                ShowContent(d);
                delete_highlight_id = "#"+highlight_elid;
            }
        }


//   on Mouse out function
 function HideContent(d) {
        if(d.length < 1) { return; }    
        document.getElementById(d).style.display = "none";
    }

I am trying to use this function ... but it not seems to be working.

jQuery('a[href="HIGHLIGHT_CREATELINK"]').mouseover(ShowHighlighter("deleteHighlight","highlight"+ randomCount + ");) ;
       jQuery('a[href="HIGHLIGHT_CREATELINK"]').mouseout('javascript:HideContentFade(\"deleteHighlight\");') 

please help me out in this.

thanks.

Answer 1

You could use the hover function to shorten the syntax:

jQuery('a[href="HIGHLIGHT_CREATELINK"]').hover(function(evt) {
    ShowHighlighter("deleteHighlight", "highlight" + randomCount);
}, function(evt) {
    HideContentFade("deleteHighlight");
});

Answer 2

Try doing this:

    $('a[href="HIGHLIGHT_CREATELINK"]').mouseover(function(){
           ShowHighlighter("deleteHighlight","highlight"+ randomCount + ");
    }) ;
    $('a[href="HIGHLIGHT_CREATELINK"]').mouseout(function(){
           HideContentFade("deleteHighlight");
    }); 

For some reason when binding an event to an element in jQuery you have to use the above syntax rather than try and bind your function directly to it.

Answer 3

You need to enclose your functions in an anonymous function

something like this

jQuery('a[href="HIGHLIGHT_CREATELINK"]').mouseover(function () {
    ShowHighlighter("deleteHighlight","highlight"+ randomCount + ");
});

jQuery('a[href="HIGHLIGHT_CREATELINK"]').mouseout(function() {
    HideContentFade("deleteHighlight");
});

if you dont do this, the function will be executed right away, instead of being added as a handler to the event.

Answer 4

There's a shorthand method for the hover event: http://api.jquery.com/hover/

jQuery('a[href="HIGHLIGHT_CREATELINK"]').hover(function() {
  // this is the mouseover handler
  ShowHighlighter("deleteHighlight","highlight"+ randomCount + ");
},
function() {
  // this is the mouseout handler
  HideContentFade("deleteHighlight");
});