Question

OnMouseOver="$('.class') .hover
    (function(){ 
 $(this).addClass('.hoverclass'); 
 }, function() {
   $(this).removeClass('.hoverclass');
  });"

我做错了什么？

Answer 1

如果您尝试在具有“class”类的所有元素上执行悬停操作，则：

$('.class').hover(function() {
    $(this).toggleClass("hoverclass");
});

Live example

您的更改：

这不是一个字符串。我不确定你的引用来自哪里，但我认为这是一个HTML属性。你可以在页面加载期间将它放在某处，就像在ready处理程序中一样。
当您致电addClass / removeClass / toggleClass时，您不会包含前导点。该点不是类名的一部分。
也可以使用toggleClass，因为这就是它的用途。

可能值得一提的是，除非您需要支持IE6，否则您不需要jQuery或JavaScript。 CSS已经有了:hover伪类。所以你可以把你的风格放在那里而不是单独的hoverClass，例如：

.class:hover {
    text-decoration: underline;
    color: blue;
}

...当鼠标悬停在它上面时，会将一个带有“class”蓝色的元素转换为带有下划线的元素。

Live example

在IE6中，这仅适用于a元素;在IE7向上和几乎所有其他浏览器，它适用于所有元素。

编辑：在下面的注释中，您说您只想对一个元素执行此操作（至少，我认为这就是您所说的）。您可以通过唯一标识元素来做到这一点 - 无论是在何处，或使用id属性。因此，例如，仅针对具有id“foo”：

的元素执行此操作

$('#foo').hover(function() {
    $(this).toggleClass("hoverclass");
});

Live example

（这也适用于CSS解决方案：

#foo:hover {
    /* ...style rules here... */
}

Live example

Answer 2

您不需要将jQuery命令作为字符串添加到onMouseOver事件中。相反，在DOM完成渲染之后执行jQuery，jQuery会附加并处理所有函数和事件，因此您不必这样做。

jQuery(document).ready(
  function() {
    // this function will be executed when DOM is ready

    // ...and this will attach your hover functions to
    // all the elements that have class 'class'
    jQuery('.class').hover(
      function(){ 
        jQuery(this).addClass('hoverclass'); 
      }, 
      function() {
        jQuery(this).removeClass('hoverclass');
      }
    );
  }
);

Answer 3

从表达式的右侧删除引号。通过使用引号，您将创建一个String而不是评估表达式。我也可以问你为什么要存储jQuery结果对象？

Answer 4

作为T.J. Crowder指出，你真的不需要使用Javascript来实现这一目标。您需要做的就是使用CSS :hover伪类，如下所示：

.some_element {
  color: #eee;
}
.some_element:hover {
  color: #fff;
}

更清洁，更简单。适用于几乎所有现代浏览器，包括IE7 +。

试图在JavaScript中进行简单的悬停？

4 个答案: