CODEWITHSUNDEEP
jquery
Stefan Weiss
Stefan Weiss

Reputation: 313

How to add/remove css :hover with jQuery for slideToggle function?

I've got a div which shows when the user is clicking on a button with jQuery slideToggle. Everything works fine, my only problem is that I would like to keep the button on :hover state as long as the div is shown. Once the user clicks it again and the div is hidden, the button should be in the non-hover state again.

How can I do that?

This is how it looks: 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;
    }

Upvotes: 0

Views: 395

Answers (1)

jmercier
jmercier

Reputation: 584

hello add switch stat 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() and removeClass() also work like a charm : )

Upvotes: 2

Related Questions