如何将多个鼠标悬停事件与Jquery结合起来？

Question

我正在尝试将多个mouseenter放入子元素中，为元素添加类。 但不幸的是，它不起作用......

这里是代码的例子和它正在做的事情。 http://js.do/Aleqxs/fonction_html

第一次改变我的ligne＆＃34; NOIR ET BLANC＆＃34;进入＆＃34; ROUGE ET NOIR＆＃34; 我的第二个鼠标应该改变＆＃34; ROUGE＆＃34;红色......但这不起作用。

Answer 1

我认为问题是复制粘贴错误，您使用

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

什么时候应该

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

此外，当您尝试包含此行的HTML

时

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

在jQuery的html函数中就像这样

$(this).html(code_avec_html);

它将显示该html，但是，任何将在该html中的类上工作的事件只有在委派时才有效。您当前的设置仅分配这些事件一次。为了使这些事件适用于未来的元素，您需要使用delegate函数的委托。

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

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