Question

我有一个可以具有任意背景颜色的元素（通过CMS设置）。

我希望通过在鼠标上加亮并在鼠标移开时使其变暗来突出显示它。

我尝试使用.css（'background-color'）来获取和设置值，但它似乎比我预期的要复杂得多。

这种非愚蠢的方式是什么？

编辑：只是为了澄清 - 这个小小的问题是解析并使用颜色值进行算术运算 - 而不是处理事件。

编辑：颜色插件给了我一种阅读颜色值的方法，但没有颜色算术和写作支持，我仍然需要做一些驴工作。

最后，我选择了快速'fadeTo'，但需要确认不透明度动画在IE6中是否正常工作。

Answer 1

您是否已查看jQuery Color plugin？

我认为核心jQuery代码中不存在颜色操作，但是最近版本的jQuery可能已经包含它了。

你需要它来让jQuery正确理解颜色操作。

Answer 2

如果您希望悬停时颜色变化平滑，可以尝试jquery-glow plugin

Answer 3

使用jQuery hover event。

var overColor  = "#ddd";
var outColor = "#ccc";

$('#target').hover(function()
{
  $(this).css("background-color", overColor);
},
function()
{
  $(this).css("background-color", outColor);
});

要处理获取现有颜色然后更改它，您必须找到一个可以理解修改HTML＃XXXXXX样式颜色的库。如果有人将背景颜色设置为“红色”这样的名称，你也必须要小心。

Answer 4

我不知道“fiddly”是什么意思，但我只是测试了它，它似乎适用于最新的jQuery

$(document).ready(function() {
    var originalbc = $("#ThingThatChangesColors").css("background-color");
    $("#ThingThatChangesColors").mouseenter(function() {
        $(this).css("background-color", "#FFF");
    });
    $("#ThingThatChangesColors").mouseleave(function() {
        $(this).css("background-color", originalbc);
    });
});

Jquery颜色变化

4 个答案: