Javascript Mouseover/out Combined With Click Behavior

I am very new in programming, please give me a mercy. Below is my code: $(function(){ document.getElementById('custom_link').addEventListener('mouseover',function(){ document.getEl

Solution 1:

http://jsfiddle.net/ETrjA/2/

$('#custom_link').hover(function () {
    $('#custom_div').toggleClass('highlighted'); 
});

$('#custom_link').click(function (e) {
   $('#custom_div').addClass('highlighted');
   $(e.currentTarget).unbind('mouseenter mouseleave');
});

You only need one class highlighted and you can access the link element directly within the click event callback via e.currentTarget.

Solution 2:

You are mixing Javascript with its framework jQuery. Stick with jQuery for this.

// CSS: Create the highlight accessible with two classnames.

.highlight, .highlight_stay{
    background:yellow;
}

Jquery

$(function(){
     $('.custom_link').hover(function(){
          $(this).addClass('highlight');
      }, function(){
          $(this).removeClass('highlight');
      });

      $('.custom_link').click(function(){
           $(this).addClass('highlight_stay');
      });
});

Solution 3:

here is a link http://jsfiddle.net/8GV7B/2/

 $(function(){
        mouse_is_clicked = false;
         $(".custom_link").hover(function(){ 
            $("#container").addClass("highlight");
        }, function(){ 
            if(!mouse_is_clicked){ 
                $("#container").removeClass("highlight");
            }else{
                mouse_is_clicked = false;
            }
        });

          $(".custom_link").click(function(){
               $("#container").addClass("highlight");
              mouse_is_clicked = true;
          });
    });