我想知道如何修改通过 jQuery 应用于元素悬停状态的现有样式。
例如:
.button { color:red; }
.button:hover { color:blue; }
我想将样式font-size:14px;
应用于.button:hover
. font-size 的值将根据用户之前与页面上的哪些其他元素进行交互而有所不同。
您不能:hover
使用 JavaScript 修改样式(或任何其他伪类),因为从技术上讲,它们不是 DOM 的一部分。
您需要做的是将这些样式添加到 CSS 中的不同类,然后使用 JavaScript/jQuery 添加/删除该类。
CSS:
.button.bigger { font-size:14px; }
jQuery:
$('.button').on('hover', function(e) {
$(this).toggleClass('bigger');
});
这与 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
});
将一些类或 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;}
您需要在 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;
}