jquery - 悬停时删除类，然后将类添加到跨度

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上时，span #sorter_bd中的文本都会显示(它首先是隐藏的)我似乎无法使其工作，有什么想法吗？

$( 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");

    });
});

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