0

我有一个标准列表，用户单击标题并使用 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。我怎样才能做到这一点？

4

4 回答 4

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;
            }
        });
于 2012-09-18T08:56:15.583 回答
0 
$(this).css('background-image', 'path/to/image.jpg');

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

编辑：这里的jsFiddle：

http://jsfiddle.net/YZFMf/

（您的 switch 语句在 slidetoggle 函数之外，这意味着“状态”的范围不正确......）

于 2012-09-18T08:45:47.360 回答
0

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

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

并在您的 JavaScript 中将类“悬停”添加到相关元素。

于 2012-09-18T09:03:10.603 回答
0

谢谢 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;}

谢谢！

于 2012-09-18T09:07:08.027 回答