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

使用.toggleClass()代替单独添加和删除。

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

Answer 2

您可以使用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

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

2 个答案: