修改CSS應用於懸停狀態

Question

我想知道如何能夠通過jQuery修改應用於元素懸停狀態的現有樣式。

例如：

.button { color:red; } 
.button:hover { color:blue; } 

我想風格font-size:14px;適用於.button:hover。 font-size的值將根據用戶之前與之交互的頁面上的其他元素而有所不同。

Answer 1

您不能使用JavaScript修改:hover樣式（或任何其他僞類），因爲從技術上講，它們不是DOM的一部分。

你需要做的是將這些樣式添加到CSS中的不同類，然後使用JavaScript/jQuery添加/刪除該類。

CSS：

.button.bigger { font-size:14px; } 

的jQuery：

$('.button').on('hover', function(e) { 
    $(this).toggleClass('bigger'); 
}); 

Answer 2

添加一些class和id您button..target使用jQuery，並添加CSS它。

例如

$('.buttonToBeChanged').on('hover',function(){ 
    $(this).css('font-size',14); 
}); 

應該這樣做。請參閱此以供參考。 http://api.jquery.com/css/

編輯：代碼將字體設置爲14px之後。即使在盤旋之後。爲了給它一個切換效果，請使用@Blazemonger的答案。這很好。或者你可以使用的mouseenter和鼠標移開事件

再次編輯 - CSS也會獨自完成這項工作作爲@Jai提及。

.button:hover { color:blue; font-size:14px;} 

Answer 3

您將需要要麼使jQuery的事件處理程序或使CSS一類特定的懸停。

這是兩者的工作示例：

http://jsfiddle.net/dboots/GHzSs/

JS：

$('#large').hover(function(e) { 
     var t = $(this); 
     t.css('fontSize', '14px'); 
}, function(e) { 
     var t = $(this); 
     t.css('fontSize', '11px'); 
});​ 

HTML：

<div class="button">Regular Button</div> 
<div class="button large">Large Button (by class/css)</div> 
<div class="button" id="large">Large Button (by id/jquery)</div>​ 

CSS：

.button { 
    padding: 5px; 
    border: 1px solid #999999; 
    width: 250px; 
    margin: 5px 0; 
} 

.button:hover { 
    border: 1px solid #000000; 
} 

.large:hover { 
    font-size: 14px; 
} 

Answer 4

這個怎麼用CSS：

.button:hover { color:blue; font-size:14px;} 

和使用jQuery：

$('.button').hover(function(){ 
    $(this).css({"font-size":"14px"}); // increases on mouseover 
},function(){ 
    $(this).css({"font-size":"12px"}); // decreases on mouseout 
});