javascript mouseover / out combiné avec le comportement de clic

Je suis très nouveau dans la programmation, donnez-moi une pitié Ci-dessous mon 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)}) 

Ce que je veux faire c’est:

  1. lorsque l’utilisateur passe la souris sur “custom_link”, “custom_div” est en surbrillance.
  2. lorsque l’utilisateur déplace la souris hors de “custom_link”, la surbrillance de “custom_div” est supprimée.
  3. lorsque l’utilisateur clique sur “lien_personnalisé”, “surligne personnalisé” est à nouveau mis en surbrillance. Cependant, lorsque l’utilisateur déplace la souris vers l’extérieur, l’élément ‘highlightDiv’ est toujours ajouté à “custom_div”.

Selon mon code, cela ne fonctionne pas correctement car le comportement lors du survol est étrange. Ce serait très bien si vous pouviez m’expliquer avec une structure de code complète ou un exemple jsfiddle. Merci pour votre aide préalable.

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'); }); 

Vous n’avez besoin que d’une classe en highlighted et vous pouvez accéder à l’élément link directement dans le rappel d’événement click via e.currentTarget .

Vous mélangez Javascript avec son framework jQuery. Restez avec jQuery pour cela.

 // 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'); }); }); 

voici un lien 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; }); });