Question

我正在尝试设置jQuery微调器按钮的活动状态，如下所示：

.ui-spinner .ui-spinner-button:hover {
    background: #FF0;
}

.ui-spinner .ui-spinner-button:active{
    background: #0FF;
}

哈佛正在运作，但主动不是。请参阅jsfiddle示例here。

请原谅丑陋的颜色 - 为了简单起见，请提供这些颜色。

更新： 问题主要出在Firefox中 - 它不会出现在Chrome中

Answer 1

我不知道如何在css中尝试一些选项，但他们不工作，但我设法解决它在jquery试一试

$(".ui-spinner .ui-spinner-button").click(function(){
        //background you want to be in active state
        $(this).css("background","#111");


    //reverse the background in 0.1 second
        setTimeout(function(){        
              $(".ui-spinner .ui-spinner-button").css("background","#fff");
        }, 100); 
});

它在firefox和chrome中都有效，但是你应该从css中删除：active，因为它将在chrome中工作，你将得到一个活动状态与css中指定颜色的混合状态和jquery的

Answer 2

看起来jQuery的背景图像优先于Firefox中的背景颜色。试试这个：

.ui-spinner .ui-spinner-button:hover {
    background-color: #FF0;
    background-image:none;
}

.ui-spinner .ui-spinner-button:active{
    background-color: #0FF;
    background-image:none;
}

Answer 3

只需替换：active伪选择器：focus。见这里：http://jsfiddle.net/xvWG5/92/

PD：我还将type="submit"替换为type="button"，因此我留在页面上。

你的新小提琴以同样的方式得到修复。选中：http://jsfiddle.net/xyb9fr35/2/

同样的事情：用:active替换:focus并使用#testSpinner作为选择器而不是类，因为在应用css时该类不在DOM中。

jQuery微调器按钮不会设置活动状态

3 个答案: