Search code examples
jquerycssmouseenter

How to combine mutliple mouseenter event with Jquery?

I am triing to make a multiple mouseenter into child element which add class for thoses elements. But unfortunaltely it is not working...

Here the exemple with the code and what it is doing. http://js.do/Aleqxs/fonction_html

First mousenter transform my ligne "NOIR ET BLANC" into "ROUGE ET NOIR" my second mousenter should transform "ROUGE" in RED color... but that does not work.

Solution

  • The issue was a copy paste error in my opinion, you use

    $(".change_into_red").mouseenter(function(){
 $(".this").addClass("red");
});

    when it should be

    $(".change_into_red").mouseenter(function(){
 $(this).addClass("red");
});

    Moreover, when you are attempting to include this line of html

    var code_avec_html = '<span class="change_into_red">ROUGE</span> ET NOIR';

    in jQuery's html function like this

    $(this).html(code_avec_html);

    It will work to display that html, however, any events that were going to work on the class in that html will only work if they were delegated. Your current setup only assigns these events one time. In order to also have these events work for future elements, you need to use delegation with the delegate function.

    $("body").delegate(".change_into_red", "mouseenter", function () {
 $(this).addClass("red");
});

$("body").delegate(".change_into_red", "mouseleave", function () {
 $(this).removeClass("red");
});