Onclick，更改悬停图像JQUERY

我有一个标准列表，其中用户使用jQuery的slideToggle（）单击标题并向下滚动当前隐藏的DIV中的项目。Onclick，更改悬停图像JQUERY

在标签我的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)我想修改CSS的一个

。我怎样才能做到这一点？

来源

2012-09-18 Chud37

我理解正确吗？您想在点击后更改悬停时显示的图片，并在第二次点击后返回旧的悬停点击，对不对？ –

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

这样创建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-18 08:56:15

啊，好主意。谢谢，这很有意义。 – Chud37

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

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

编辑：这里的jsfiddle：

http://jsfiddle.net/YZFMf/

（你的switch语句是的slideToggle功能外，意为 '国家' 是不正确作用域...）

来源

2012-09-18 08:45:47 MassivePenguin

jquery没有：悬停选择器 –

另外，我怎么可以用'$（this）'引用？ – Chud37

不好意思，你说得对。我的错。 – MassivePenguin

在你的CSS，添加这样的另一个项目：

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

而在你的JavaScript添加类“悬停”到有问题的元素。

来源

2012-09-18 09:03:10 Fisch

谢谢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-18 09:07:08 Chud37

Onclick，更改悬停图像JQUERY

回答

相关问题