CODEWITHSUNDEEP
jquery
SebastianMatiz
SebastianMatiz

Reputation: 35

Remove, then add class to a span when hovering

Hello I have the following HTML

    <div id="sort_icons">
        <img src="resources/images/sort_book.png" class="sort_icons" id="book">
    </div>  
    <div id="sorter_text">
        <p>I DO 
            <span class="sorter_hidden" id="sorter_bd">BOOK DESIGN.</span>
        </p>
    </div>

and the CSS is the following

.sorter_hidden{
    display: none;
}

.sorter_show{
    display: inline;
}

and this is the query, I want that whenever you hover over image #book, the text in span #sorter_bd displays (it is hidden at first) I can't seem to make it work, any ideas?

$( document ).ready(function () {

    $("#book").hover(function() {
    $("#sorter_bd").removeClass("sorter_hidden");
    /*$("#sorter_bd, #sorter_ph, #sorter_id, #sorter_dv, #sorter_st, #sorter_ev").css("display","none");*/
    $("#sorter_bd").addClass("sorter_show");

    });
});

Upvotes: 1

Views: 648

Answers (2)

Felix
Felix

Reputation: 38112

You can use hover() with two handlers like this:

$( "#book" ).hover(
    function() {
        $("#sorter_bd").addClass("sorter_show");
    }, function() {
        $("#sorter_bd").removeClass("sorter_show").addClass("sorter_hidden");
    }
);

Demo

or you can just use toggleClass() here:

$("#book").hover(function() {
    $("#sorter_bd").toggleClass('sorter_hidden sorter_show');
});

Demo

Upvotes: 2

Venkata Krishna
Venkata Krishna

Reputation: 15112

Use .toggleClass() instead of add and remove separately.

$("#book").hover(function() {
    $("#sorter_bd").toggleClass('sorter_show sorter_hidden');
});

Upvotes: 2

Related Questions