jquery - 当鼠标悬停在确定类别的元素上时显示详细信息

Question

我正在尝试创建一个细节 block ，如果该元素具有类“hasDetails”，则只有当光标位于列表的元素上时才会显示该 block 。我尝试使用“mouseover”和“mouseenter”，但均无效。我不明白为什么这不起作用。谁能帮忙？

JQUERY

    $(document).ready(function() {
        $('#list').find('.listItem').mouseover(function(){
            if($(this).hasClass('hasDetails')) {
                $('#details').css("display", "table");
            };
        });
    });

HTML

    <div id="details">
        <p>Details</p>
    </div>

    <ul id="list">
        <li class="listItem hasDetails">
            <p>ITEM</p>
        </li>
        <li class="listItem">
            <p>ITEM</p>
        </li>
        <li class="listItem hasDetails">
            <p>ITEM</p>
        </li>
        <li class="listItem">
            <p>ITEM</p>
        </li>
        <li class="listItem">
            <p>ITEM</p>
        </li>
    </ul>

CSS

    .details{
        display: none;
    }

Answer 1

 $(document).ready(function() {
        $('#list').find('.listItem').mouseover(function(){
            if($(this).hasClass('hasDetails')) {
                $('#details').show();
            };
        });
    });