Question

所以我有：

#selection_menu .secondary_options button:hover { color: #000066; }

它在我的网站上运行良好..

当单击其中一个按钮时，我运行一个包含以下内容的javascript函数：

$('button').css("color","#FFFFFF");
if(!$sameTile)
    $($tileSelector).css("color","#000066");

因此，单击该按钮时，当鼠标移开时，突出显示颜色会突出。

我遇到的问题是，在第一次运行后，按钮会在突出显示时停止改变颜色。我怎么能绕过这个？或者这是正常行为吗？

我正在尝试添加一个类，我无法让它工作：http://jsfiddle.net/sUKkb/1/

我的一些代码： index：http://pastebin.com/7gYu9YG8 css：http://pastebin.com/Jz1bvzrr

或者这可能会更有帮助：http://staging.easyzag.com/style.css

视图-出处：http：//staging.easyzag.com/index.php部=饮

Answer 1

这里的问题是你的jQuery添加了一个内联样式，它将覆盖你的CSS规则。另一个问题是$('button').css('color','#000666')将内联样式应用于所有按钮。

我建议在CSS中为默认值和粘滞状态添加规则，如下所示：

button { color:#fff }
button:hover { color:#fff }
.sticky-state { color:#000066 }

然后在你的jQuery中你做这个而不是你正在做的事情：

`$(/*add your selector here*/).addClass('.sticky-state');

Answer 2

我相信这是（一般）你所追求的：

jsFiddle：http://jsfiddle.net/sUKkb/5/

HTML：

<button class="not-sticky">Hello</button>

JS：

$('button').on('click', function(e){
    $(this).removeClass('not-sticky').addClass('sticky-state');
});

注意，这需要一个相对较新版本的jQuery（1.7+）。你也可以使用：

$('button').live('click', function(e){
    $(this).removeClass('not-sticky').addClass('sticky-state');
});

或

$('button').click(function(e){
    $(this).removeClass('not-sticky').addClass('sticky-state');
});

用于旧版本的jQuery。

Answer 3

试试这个; 在你的CSS中;

.new_class{ 
   color:#000066 
}

你的JS中的

$('button').css("color","#FFFFFF");
if(!$sameTile){
    $($tileSelector).removeClass()('.your_previous_class');
    $($tileSelector).addClass('.new_class');
}

或者您可以尝试

$($tileSelector).css({ 'color':'#000066' });

这里是小提琴http://jsfiddle.net/sUKkb/2/（没有上课）

和这一个http://jsfiddle.net/sUKkb/3/（与班级）

这一个http://jsfiddle.net/sUKkb/4/使用ID代替类来使按钮唯一

我认为，你想要的是一个切换解决方案，如下面的小提琴;

http://jsfiddle.net/sUKkb/7/

Answer 4

如果这给你带来麻烦，你可以在没有jquery的情况下完成。

为悬停效果添加onmouseover和onmouseout处理程序，并添加首先取消onmousover和onmouseout的onclick，然后设置所需的颜色。

用jquery改变颜色会删除悬停颜色？

4 个答案: