jquery - 修改应用于悬停状态的 CSS

Question

我想知道如何修改通过 jQuery 应用于元素悬停状态的现有样式。

例如：

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

我想将样式font-size:14px;应用于.button:hover. font-size 的值将根据用户之前与页面上的哪些其他元素进行交互而有所不同。

Answer 1

您不能:hover使用 JavaScript 修改样式（或任何其他伪类），因为从技术上讲，它们不是 DOM 的一部分。

您需要做的是将这些样式添加到 CSS 中的不同类，然后使用 JavaScript/jQuery 添加/删除该类。

CSS：

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

jQuery：

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

Answer 2

这与 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
 });

Answer 3

将一些类或 id 添加到您的按钮..使用 jquery 定位它并添加 css 到它。

例如

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

应该这样做。请参阅此内容以供参考。http://api.jquery.com/css/

编辑：之后代码会将字体设置为 14px。即使在悬停之后。要给它一个切换效果，请使用@Blazemonger 的答案。那很好。或者你可以使用mouseenter和mouseout事件

再次编辑 - CSS 也将像@Jai 提到的那样单独完成这项工作。

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

Answer 4

您需要在 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;
}