Question

我有一个标准列表，用户点击标题并使用jQuery的slideToggle（）向下滚动当前隐藏的DIV中的项目。

在标签中我的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 here：

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”类添加到相关元素中。

Answer 4

谢谢MassivePenguin和FAngel，我已经在你的帮助下解决了这个问题！

我的代码如下：

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

        });

使用FAngel建议的CSS：

a.showBlind             {width: 100%; display: block;}
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;}

谢谢！

Onclick，更改悬停图片JQUERY

4 个答案: