Onclick，更改悬停图像JQUERY

Question

我有一个标准的列表，用户可以单击标题并使用jQuery的slideToggle()向下滚动当前隐藏的DIVs中的项。

在标记中，我的CSS文件声明：

a.showBlind:hover {background:url('img/scroll.png') right center no-repeat;}

但一旦它被点击，我希望悬停图像是不同的(即X图标关闭百叶窗)。如何使用jQuery设置此设置？

我可以找出我的DIV的状态没问题。目前我的Jquery看起来像这样(未完成)：

$(".showBlind").click(function () {
            var group = $(this).attr("rel");
            $(".group"+group).slideToggle("slow",function () {
                var state = $(".group"+group).css("display");
            });
            switch (state)
            {   case "none":

                    break;
                case "block":

                    break;
            }
        });

在switch(state)中，我想修改a:hover的CSS。我如何才能做到这一点？

Answer 1

如果我的理解是正确的，你只需要改变悬停图像，你可以像下面这样做。

如下所示创建css：

a.showBlind:hover {background:url('img/scroll.png') right center no-repeat;}
a.showBlind.closeIcon:hover {background:url('img/close.png') right center no-repeat;}

并且在你的代码中

$(".showBlind").click(function () {
            var group = $(this).attr("rel");
            $(".group"+group).slideToggle("slow",function () {
                var state = $(".group"+group).css("display");
            });
            switch (state)
            {   case "none":
                    $(this).removeClass('closeIcon');
                    break;
                case "block":
                    $(this).addClass('closeIcon');    
                    break;
            }
        });

Answer 2

$(this).css('background-image', 'path/to/image.jpg');

请记住，您的路径现在将相对于HTML文档，而不是CSS文件。

编辑: jsFiddle地址：

http://jsfiddle.net/YZFMf/

(您的switch语句位于slidetoggle函数之外，这意味着'state‘的作用域不正确...)

Answer 3

在CSS中，添加另一个条目，如下所示：

a.showBlind.hover:hover {background:url('img/X.png') right center no-repeat;}

在您的JavaScript中，将类"hover“添加到有问题的元素中。