$.css() 不适用于 :hover 和 :active 伪类

Question

我想知道为什么使用button:hover和button:active不起作用$.css()

button {
    background: #781111;
    color: white;
}

 

<button>test</button>

 

$('button:hover').css({
    'background':'#fe2000'
});
$('button:active').css({
    'background':'#d50d04'
});

悬停并单击按钮时，该按钮仍以相同的方式显示。有没有其他方法可以做到这一点？

JSFiddle

Answer 1

你可以改用纯 css：

button:hover {
    background: #fe2000
}
button:active {
    background: #d50d04
}

我建议你使用CSS而不是javascript来完成任何可以通过两种方式完成的任务。

Answer 2

这是一个全 jQuery 方法

var $this = $('button')
    .on('mouseout mouseup', function() {
        // Normal
        $this.css('background', initialColor);
    })
    .mouseover(function() {
        // Hover
        $this.css('background', '#ff0000');
    })
    .mousedown(function() {
        // Active
        $this.css('background', '#00ff00');
    }),
    initialColor = $this.css('background');

JSFiddle

Answer 3

应用 css 的最佳方式

button:hover {
    background: #fe2000
}
button:active {
    background: #d50d04
}

Answer 4

与其像这样使用悬停和活动选择器，不如使用事件$.hover和$.focus。