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

时间:2014-04-14 18:10:12

标签: jquery css mouseenter

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

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

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

1 个答案:

答案 0 :(得分:3)

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

$(".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");
});