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

Question

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

我究竟做错了什么？

Answer 1

如果您尝试在具有类"class"的所有元素上执行悬停操作,则:

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

实例

你的变化:

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

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

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

...当鼠标悬停在它上面时,会使用带有下划线的类"class"蓝色转换元素.

实例

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

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

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

实例

(这也适用于CSS解决方案:

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

实例