使用jquery设置十六进制颜色

时间:2012-09-14 00:59:16

标签: jquery html

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

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

我输了NEW:悬停颜色。非悬停颜色正确更改,但我看到它们转换为RGB格式,我猜这是导致问题:悬停值。 我想我可以更改我的代码并在悬停时更改类以解决此问题,但有没有办法让jQuery使用十六进制值设置颜色?或者还有其他我想念的东西?

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

2 个答案:

答案 0 :(得分:2)

这里有一个问题,“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应用于附加了该类的特定标记的“style”属性,它不会修改内存中的CSS文件或任何内容。因此,当您运行悬停功能时,您几乎忘记了您尝试对CSS类进行的更改。

为了懒惰我只会使前景颜色发生变化,并将非悬停前景颜色硬编码,显然,你不会想要; - )

答案 1 :(得分:0)

:hover不能以这种方式用作选择器。选择器的想法是jquery将在页面上找到当前与选择器匹配的所有元素。虽然:hover I beleive根本不是一个有效的选择器,但如果是的话,那就是找到所有当前悬停的元素,因为这就是选择器的工作方式。

此外,使用.css设置元素的样式基本上只是将值添加到元素的style属性中。因此,自it is not possible to set the hover css directly in the style attribute起,您无法使用.css设置它。