4

所以我有：

#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/7gYu9YG8 css： http: //pastebin.com/Jz1bvzrr

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

查看源代码：http://staging.easyzag.com/index.php?section=drink

4

4 回答 4

4

这里的问题是您的 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');
于 2012-07-28T03:39:11.500 回答
1

我相信这（通常）是您所追求的：

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。

于 2012-07-28T07:59:14.110 回答
0

试试这个; 在你的 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/

于 2012-07-28T06:40:41.150 回答
0

如果这给您带来麻烦，您可以在没有 jquery 的情况下执行此操作。

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

于 2012-07-28T06:54:42.680 回答