使用jquery更改颜色将删除悬停颜色

Changing color with jquery removes hover color?

本文关键字：颜色 悬停 删除 jquery 使用      更新时间：2024-05-07

所以我有：

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

它在我的网站上运行得很好。。

然而，当点击其中一个按钮时，我会运行一个javascript函数，其中包含：

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

这样，当单击按钮时，当鼠标移开时，高亮显示的颜色会保持不变。

我遇到的问题是，在第一次运行后，按钮在高亮显示时停止更改颜色。我该怎么绕过这个？还是这是正常行为？

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

我的一些代码：索引：http://pastebin.com/7gYu9YG8css：http://pastebin.com/Jz1bvzrr

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

视图源：http://staging.easyzag.com/index.php?section=drink

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

我建议在CSS中添加一条规则，用于默认值和粘性状态，如下所示：

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

然后在你的jQuery中，你这样做，而不是你正在做的：

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

我相信这（通常）就是你想要的：

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。

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

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

试试这个；在您的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/

相关文章：