鼠标悬停风格变化与jQuery

采取以下HTML：鼠标悬停风格变化与jQuery

<li> 
    <p> 
    <a href="#" class="link" ><img src="images/photo_cityguild_cropped.jpg" alt="Education" title="Education"> 
    <span class="label">E D U C A T I O N</span> 
    </a> 
    </p> 
    </li>

我想根本上改变用户悬停在图片链接的事件类<span>的。

我还没有我带了很多使用jQuery和它已经有一段时间，无论如何，我尝试以下操作：

$(".link").mouseover(function() { 
    $(this).find("span").addclass("label2"); 
    }).mouseout(function(){ 
    $(this).find("span").removeclass("label2"); 
    });

可能有人指示我，什么我需要更正，因为它目前无所事事。

感谢，

编辑我的解决方案更新。

实现了这个代码，而不是：

$(".link").live("mouseover mouseout", function(event) { 
    if (event.type == "mouseover") { 
    $(this).find("span").addClass("label2"); 
    } else { 
    $(this).find("span").removeClass("label2"); 
    } 
});

来源

2011-07-01 buymypies

我已经纠正语法重构代码，但还是我得到什么：S – buymypies

做我之前，我可以删除“标签”类看到label2的影响？ – buymypies

下次如果你提到你的HTML片段被动态地添加到DOM – Mutt

是的，问题出在您调用的方法上。它应该如上所述，即addClass和removeClass。

另外，我觉得你可以使用hover事件

 
$(".link").hover(function() { 
    $(this).find("span").toggleClass("label2"); 
});

来源

2011-07-01 21:12:30 a5his

我建议.hover()而不是鼠标悬停输入/输出，并找到替代children('span')

来源

2011-07-01 20:27:41 helloandre

，我不同意悬停，我自己。我真的不认为它比'扩展'的形式更有帮助。不过，我完全支持使用find而不是孩子。 –

（ '跨'）你有一个语法错误。这是

addClass()

和

removeClass()

大写 'C'。

来源

2011-07-01 20:29:05 mariogl

addClass and removeClass

通知驼峰规则

来源

2011-07-01 20:30:17 AlienWebguy

JavaScript函数是大小写敏感的。

在这种情况下.addclass应该.addClass和.removeclass应.removeClass

小提琴：http://jsfiddle.net/Uq67C/1/

编辑：

你的CSS正在寻找与类label和label2元素的元素里面有ID为menu。例如：

<ul id="menu"> 
<li> 
    <p> 
    <a href="#" class="link" ><img src="images/photo_cityguild_cropped.jpg" alt="Education" title="Education"> 
    <span class="label">E D U C A T I O N</span> 
    </a> 
    </p> 
    </li> 
</ul>

应该工作。

来源

2011-07-01 20:30:25 Mutt

我明显可以看到这个作品，但是对于我自己来说，在更正语法之后仍然没有运气：S – buymypies

@buymypies您的CSS看起来像什么？ – Mutt

我的jquery工作，因为我测试过它的用途，所以有些东西不是用我的语法写的？ – buymypies

鼠标悬停风格变化与jQuery

回答

相关问题