所以我希望按钮在鼠标停止时改变样式,并在它上升时返回到前一个。我有这段代码:
$('#divMenu > #menu li a').mousedown(function(){
$(this).css({
'font-size': '25px',
'color': 'red'
});
}).mouseup(function(){
$(this).css({
'font-size': '30px',
'color': 'black'
});
});
问题是,当我按下鼠标但将其取下而不立即释放时,字体大小和颜色保持25px和红色。我该怎么做才能通过?
编辑: JsFiddle:http://jsfiddle.net/h64Uz/
答案 0 :(得分:6)
您也需要使用鼠标输出。
$('#divMenu > #menu li a').mousedown(function(){
$(this).css({
'font-size': '25px',
'color': 'red'
});
}).mouseup(function(){
$(this).css({
'font-size': '30px',
'color': 'black'
});
}).mouseout(function(){
$(this).css({
'font-size': '30px',
'color': 'black'
});
});
单击鼠标时,事件代码会设置css。一旦你搬走它就无法注册鼠标。但是在离开时它将注册一个mouseout事件。
答案 1 :(得分:1)
jQuery有一个mouseleave()
事件可用于补充现有代码:
答案 2 :(得分:0)
这应该有效(假设您使用的是jQuery
1.7或更高版本):
$('#divMenu > #menu li a').on("mousedown", function () {
$(this).css({
'font-size': '25px',
'color': 'red'
});
}).on("mouseup mouseout", function () {
$(this).css({
'font-size': '30px',
'color': 'black'
});
});