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

用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。

e.g。

$('.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;
}

修改应用于悬停状态的CSS

4 个答案: