如何使用 JavaScript / jQuery 修改 :hover 样式？答案

【问题标题】：how do I modify a :hover style using JavaScript / jQuery?如何使用 JavaScript / jQuery 修改 :hover 样式？
【发布时间】：2013-05-01 07:25:18
【问题描述】：

我在 CSS 样式表文件中声明了 :hover 样式定义：

.myclass:hover {
    border-color: red;
    background-image: url('http://goo.gl/zdLfy');
}

现在，在给定条件下，我想更改此悬停样式的 background-image。

我不知道如何使用 JavaScript / jQuery 做到这一点。这可能吗？怎么样？

【问题讨论】：

我觉得我的问题写得不好。我知道现在人们已经回答了什么（谢谢），但这不是我问的。
你的意思是你想改变css样式本身？
看：答案的第一部分是“是”或“否”。我可以改变风格吗？ ":hover" 样式，特别是。
您将不得不使用 javascript 来查询样式表并更改 Css 类。
是的，这样会更有意义。但是，为什么您不能使用该背景图像定义另一个类并根据您的条件更改该类。

标签： javascript jquery css hover

【解决方案1】：

您可以在之前的声明上添加新的样式标签级联。假设 head 标签中的 css

$('head').append('<style>#element:hover {/
    background-image: url("http://new.image/url");/
}/
<style>');

【讨论】：

【解决方案2】：

$('#element').hover(function() {
//on hover
    if(condition === true) {
        $(this).addClass('newBGImage');
    }
}, function() {
//when hover ends
    if($(this).hasClass('newBGImage')) {
        $(this).removeClass('newBGImage');
    }
});

【讨论】：

【解决方案3】：

让你的 CSS 变成这样：

.myclass:hover {
    border-color: red;
    background-image: url('http://goo.gl/zdLfy'); 
}

.specialCondition:hover {
    background-image: url('http://anotherURL');
}

然后，对于那个特殊情况，做：

$('.myclass').addClass('specialCondition');

当特殊条件不再存在时，删除类：

$('.myclass').removeClass('specialCondition');

这样你就可以将你的背景网址保存在它们所属的位置，在 CSS 中

【讨论】：

+1 我想这就是我真正要做的。事实上，这确实是正确的做法！你的答案虽然简单，但写得很好。谢谢！我也想接受你的回答，但穆萨的肮脏伎俩实际上做到了我想要和要求的。
另外，令人惊讶的是，从现在提到“条件”的答案中，你是唯一一个正确考虑它的人。

【解决方案4】：

您想添加一个具有新背景的类，然后在悬停时使用类似

$(this).addClass("YourClassName");

然后请假

$(this).removeClass("YourClassName");

【讨论】：