使用 jquery 设置十六进制颜色答案

【问题标题】：Setting hex colors with jquery使用 jquery 设置十六进制颜色
【发布时间】：2012-09-14 00:59:16
【问题描述】：

我的 UI 样式表中有一个类设置，以及一个用户可以使用颜色选择器设置页面样式的首选项部分。这些值以十六进制形式存储在数据库中，但是当我使用这些值通过 jQuery 更新页面时：

$nav.css("background-color", button_bg_color)

我失去了新的 :hover 颜色。非悬停颜色正确更改，但我看到它们被转换为 RGB 格式，我猜这会导致 :hover 值出现问题。我想我可以更改我的代码并在悬停时更改类来解决这个问题，但是有没有办法让 jQuery 使用十六进制值设置颜色？还是我还缺少其他东西？

更新： James Montagne 是对的，因为你不能改变 :hover 效果，所以我把它改成了一个类。现在，使用 hover() 函数，我仍然缺少一些东西：小提琴：http://jsfiddle.net/Y9EBt/6/

【问题讨论】：

它们没有转换成 RGB，浏览器的检查器显示为 RGB，但是 RGB(r,g,b) 和 #rrggbb 格式完全相同
你是这个意思吗？ jsfiddle.net/T3ZAg 在这种情况下，您的问题是由 jQuery 的 .css() 方法引起的，该方法将颜色设置为内联样式。然后，此内联样式会覆盖样式表中的 :hover 声明。
如果您需要保留悬停样式，只需在样式中添加!important
你能提供一个小提琴，以便更容易回答你的问题
我现在会处理小提琴 - 但问题不是失去原来的 :hover ，而是新的 :hover 没有生效。而且，检查员在页面加载时将颜色值显示为十六进制，但在更改后显示为 rgb 是否正常？我知道它们最终是相同的值，但是对于 CSS，它们可以有不同的解释吗？

标签： jquery html

【解决方案1】：

这里有一个问题，“Javascript 不支持获取或设置伪选择器的属性，这意味着您无法直接获取 :hover css 样式。” [source]

JQuery 确实有一个.hover() function，它可能用于间接更改悬停项目的 css。示例：jQuery CSS Hover

编辑： 这是我展示它工作的小提琴： http://jsfiddle.net/TvfB9/1/

重点是：

我在 javascript 中创建了一个全局变量（在文档就绪函数之外）： hover_color = "#00FFff"; 用于存储用户的“新”或“所需”悬停颜色。理想情况下，您可能希望在页面加载时将其初始化为样式表中的任何内容。
然后在更改颜色函数中，我更新了全局变量：hover_color = hover_text_color;。在此示例中，我将您已在小提琴中使用的变量分配给它，但 hover_text_color 应替换为用户从您的选择器控件中选择的任何值。
我向文档就绪的 javascript 对象添加了一个悬停功能，并从全局变量中为 .nav 类设置 CSS。

    $('.nav').hover(function() {
        $(this).css('color', hover_color ); 
    },
    function() {
        $(this).css('color', '#ffffff');
    });

基本上，当您使用 .CSS 设置 CSS 时，它实际上将 CSS 应用于附加了该类的特定标签的“样式”属性，它不会修改内存中的 CSS 文件或任何东西。因此，当您运行悬停功能时，您几乎已经忘记了您尝试对 CSS 类进行的更改。

为了懒惰，我只改变前景色，并将非悬停前景色硬编码，显然，你不会想要;-)

【讨论】：

这看起来是一个可行的简单解决方案，但我仍然无法让 nav_hover 生效：jsfiddle.net/Y9EBt/5 有什么想法吗？
我已经更新了我的答案以解决如何修复更新的更接近工作小提琴
如何使用 attr 设置颜色的十六进制值？
空参考，请将您的后续问题作为新问题发布。这样你会得到更多的答案:)

【解决方案2】：

:hover 不能以这种方式用作选择器。选择器的想法是 jquery 会找到页面上所有当前匹配选择器的元素。虽然 :hover 我相信它根本不是一个有效的选择器，但如果是，那么我们的想法是找到所有当前悬停在上面的元素，因为这就是选择器的工作方式。

此外，使用.css 设置元素的样式实际上只是为元素的样式属性添加值。所以，由于it is not possible to set the hover css directly in the style attribute，你不能使用.css来设置它。

【讨论】：