Clever Geek Handbook

Javascript mouseover / out combined with click behavior

I am very new to programming, please give me mercy. Below is my code:

$(function(){
document.getElementById("custom_link").addEventListener("mouseover",function(){
document.getElementById("siteContent").contentDocument.getElementById("custom_div").classList.toggle('highlightDiv');
},false)})

$(function(){
    document.getElementById("custom_link").addEventListener("click",function(){
    document.getElementById("siteContent").contentDocument.getElementById("custom_div").classList.add('highlightDiv');
    },false)})

What I want to do:

  • when the user hovers over "custom_link", "custom_div" is highlighted.
  • when the user moves the mouse out of "custom_link", the selection on "custom_div" is removed.
  • when the user clicks on "custom_link" the "custom_div" is highlighted again. However, when the user moves the mouse, the "highlightDiv" is still added to the "custom_div".

According to my code, it is not working correctly because the hang behavior is weird. It would be really nice if you could explain to me the complete structure of the code or a jsfiddle example. Thank you for your help.

+3


source to share


3 answers


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 reference element directly in the event callback click

via e.currentTarget

.

+1


source


You are mixing Javascript with its jQuery framework. Stick to 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');
      });
});
+1


source


here is the 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;
          });
    });
0


source






More articles:


All Articles