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:
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.
$('#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; }); });