jquery addclass问题答案

【问题标题】：jquery addclass problemjquery addclass问题
【发布时间】：2011-04-12 21:29:37
【问题描述】：

当我将其悬停时，我试图为图像添加边框，但它没有添加它：S 但我尝试了 console.log，它显示了我写的文本，但它没有将类添加到它：S

这是我的代码

<style>
.test {
    border: 1px solid #000;
}
</style>
// add a class to the image that is focus on
$('#small-image .thumb').hover(function() {
    $(this).addClass('test');
        console.log('hover');
}, function() {
    $(this).removeClass('test');
        console.log('out');
});

【问题讨论】：

你为什么用jQuery而不是css？ .thumb:hover { border: 1px solid #000 }?
你有 jsfiddler.net 的例子吗？

标签： jquery css image class add

【解决方案1】：

为什么需要 javascript？

标记：

<div id="foo"></div>

CSS：

#foo {width:50px; height:50px; border: 1px solid blue}
#foo:hover {border-color: red}

工作示例：http://jsfiddle.net/JndDd/

【讨论】：

@Neal 适用于 IE 7 及以下版本；在我看来不是问题。
好吧，我没有想到 :)，但它仍然不起作用：S 我尝试 #small-image.thumb:hover { 边框：5px 纯蓝色； }
@ole，尝试在 jsfiddle.net 上发布您的代码，然后在新问题中发布链接

【解决方案2】：

也许问题在于您的基础 CSS 覆盖了 test 类中的样式？

如果你不关心 IE6，你可以用 CSS 做所有事情：

#small-image.thumb:hover {
    border: 5px solid blue;
}

【讨论】：

【解决方案3】：

您的代码似乎运行良好：

http://jsfiddle.net/eDyTg/1/

无论问题是什么，都与您发布的内容无关。

【讨论】：

【解决方案4】：

尝试删除选择器中的空格：

$('#small-image .thumb')

到

$('#small-image.thumb')

【讨论】：