如何使用jQuery for slideToggle函數添加/刪除css：hover？

我有一個div它顯示當用戶點擊一個按鈕與jQuery slideToggle。一切正常，我唯一的問題是，只要div顯示，我想保持button在:hover狀態。一旦用戶再次單擊並隱藏div，該按鈕應該再次處於non-hover狀態。如何使用jQuery for slideToggle函數添加/刪除css：hover？

我怎麼能這樣做？

這是它的外觀：http://jsfiddle.net/Teo123/4DW7U/1/

HTML

<div class="travel_infobox" id="infobox_1"> 
    <p>Text</p> 
</div> 

<div class="travel_info"> 
    <a href="#" id="info_button_1">InfoBox</a> 
</div>

jQuery的

$(document).ready(function(){ 
    $(".travel_infobox").hide(); 
    $("#info_button_1").click(function(e){ 
     $("#infobox_1").slideToggle(600); 
     e.preventDefault(); 
    }); 
});

CSS

.travel_info a{ 
    text-decoration : none; 
    background  : url('../images/info_icon.png') no-repeat left top 0px; 
    color   : #555; 
    } 

.travel_info a:hover{ 
    background  : url('../images/info_icon.png') no-repeat left bottom 0px; 
    color   : #FF6C00; 
    text-decoration : underline; 
    }

來源

2014-01-14 Teo

用addClass（）和removeClass（） – CRABOLO

的jQuery沒有獲得僞類 – adeneo

您可能希望做一個addclass到你的A href，這有你的懸停CSS。然後再次切換時執行removeclass。它的jQuery改變的分配，但應該按你的意願工作。 – Cam

hello添加開關統計VAR

$(document).ready(function(){ 
var btn=true; 
$(".travel_infobox").hide(); 
$("#info_button_1").click(function(e){ 
    $("#infobox_1").slideToggle(600); 
    if(btn) { 
     $('.travel_info a:hover').css('text-decoration', 'underline'); 
     btn=false; 
    }else{ 
     btn=true; 
     $('.travel_info a:hover').css('text-decoration', 'none'); 
    } 
    e.preventDefault(); 
});

}）;

addClass（）和removeClass（）也工作就像一個魅力：）

來源

2014-01-14 23:54:53 jmercier

你好，我在我的臨時以及JSFiddle中試過，但是我無法完成它。但我注意到，你專注於文本裝飾，我的主要問題實際上是在hover上也改變顏色的背景圖片。你可以試着讓你的JSFiddle工作嗎？ – Teo

試試這個http://jsfiddle.net/4DW7U/5/ – jmercier

如何使用jQuery for slideToggle函數添加/刪除css：hover？

回答

相關問題