Question

采取以下html：

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

Answer 1

您遇到语法错误。这是

addClass()

和

removeClass()

使用大写'C'。

Answer 2

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

此外，我认为您可以使用hover事件重构代码

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

Answer 3

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

Answer 4

addClass and removeClass

注意camelCasing

Answer 5

JavaScript函数区分大小写。

在这种情况下，.addclass应为.addClass而.removeclass应为.removeClass

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

编辑：

您的CSS正在查找ID为label的元素中包含label2和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>

应该有用。

使用JQuery更改鼠标悬停样式

5 个答案: