Удалить, а затем добавить класс к промежутку при наведении

Question

Привет У меня есть следующий 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> 

и CSS является следующая

.sorter_hidden{ 
    display: none; 
} 

.sorter_show{ 
    display: inline; 
} 

и это вопрос, я хочу, чтобы каждый раз, когда вам наведите курсор на изображение #book, текст в пропуске #sorter_bd отобразится (сначала он скрыт) Я не могу заставить его работать, любые идеи?

Answer 1

Вы можете использовать hover() с двумя обработчиками, как это:

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

Demo

или вы можете просто использовать toggleClass() здесь:

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

Demo

Answer 2

Используйте .toggleClass() вместо того, чтобы добавлять и удалять отдельно.

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