代码之家  ›  专栏  ›  技术社区  ›  Andy Baker

jquery颜色更改

  •  1
  • Andy Baker  · 技术社区  · 17 年前

    我有一个元素,可以有一个任意的背景色(通过CMS设置)。

    我想通过在鼠标上加亮和在鼠标外加暗来突出它。

    我尝试使用.css(“background-color”)来获取和设置该值,但它似乎比我预期的要复杂得多。

    做这件事的非愚蠢方法是什么?

    编辑:只是为了澄清——这一小点是用颜色值解析和做算术——而不是处理事件。

    编辑:这个颜色插件给了我一种读取颜色值的方法,但是没有颜色算法和写支持,我仍然需要做一些辅助工作。

    最后,我使用了一个快速的“fadeto”,但需要确认不透明度动画在IE6中工作正常。

    4 回复  |  直到 17 年前
        1
  •  3
  •   chakrit Dutchie432    17 年前

    你检查过 jQuery Color plugin ?

    我认为颜色操作不存在于核心jquery代码中,但可能jquery的最新版本已经包含了它。

    您需要它来让jquery正确理解颜色操作。

        2
  •  1
  •   mishac    17 年前

    如果您想在悬停时平滑地改变颜色,可以尝试 jquery-glow plugin

        3
  •  0
  •   cdmckay    17 年前

    使用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样式颜色的库。如果有人将背景色设置为“红色”这样的名称,你也必须小心。

        4
  •  0
  •   Indeed is Trash    17 年前

    我不知道你所说的“小心谨慎”是什么意思,但我刚刚测试过这个,它似乎在最新的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);
        });
    });