如何修改使用JavaScript/jQuery的懸停樣式？

我在CSS樣式表文件中聲明的:hover樣式定義：如何修改使用JavaScript/jQuery的懸停樣式？

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

現在，給定的條件下，我想改變background-image這個懸停風格。

我不知道如何使用JavaScript/jQuery來做到這一點。這可能嗎？怎麼樣？

來源

2013-04-30 J. Bruni

我想我沒有寫好問題。我知道人們現在回答了什麼（謝謝），但這不是我問的。 – 2013-04-30 23:11:03

你的意思是你想改變CSS風格本身？ – PSL 2013-04-30 23:12:06

@PSCoder：是的！ – 2013-04-30 23:12:45

您可以添加一個新的樣式標籤級聯在先前的聲明上。在假設的css頭標記

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

來源

2013-04-30 23:15:31 Musa

非常有趣！ – 2013-04-30 23:25:02

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

來源

2013-04-30 23:08:55

這裏沒有條件.. – 2013-04-30 23:19:42

更新它來處理給定的條件 – 2013-04-30 23:21:37

你想補充一點，有新的背景類，然後懸停使用類似

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

，然後離開

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

來源

2013-04-30 23:09:19 griegs

讓你的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

來源

2013-04-30 23:25:18 DanC

+1我認爲這是我將要做的。事實上，這確實是正確的做法！你的答案雖然簡單，但寫得很好。謝謝！我也想接受你的回答，但是穆薩的骯髒的伎倆實際上是我想要和要求的。 – 2013-04-30 23:34:33

此外，令人驚訝的是，從現在提到的「條件」的答案，你是唯一一個認爲是正確的。 – 2013-04-30 23:37:56

如何修改使用JavaScript/jQuery的懸停樣式？

回答

相關問題