0

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

例如:

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

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

4

4 回答 4

4

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

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

CSS:

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

jQuery:

$('.button').on('hover', function(e) {
    $(this).toggleClass('bigger');
});
于 2012-12-11T18:09:55.243 回答
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
 });
于 2012-12-11T18:17:47.077 回答
1

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

例如

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

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

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

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

.button:hover { color:blue; font-size:14px;}
于 2012-12-11T18:12:05.677 回答
1

您需要在 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;
}
于 2012-12-11T18:16:28.643 回答