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

回答

相關問題