Question

我尝试创建一个细节块，只有当光标位于列表的某个项目上时才会显示，如果该项目具有“具有详细信息”的类别。我尝试过使用鼠标悬停＆＃39;和＆＃39; mouseenter＆＃39;但都没有奏效。我无法理解为什么这不起作用。有人可以帮忙吗？

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();
            };
        });
    });

Answer 2

这是你的问题： $('#details').css("display", "table");

如果您是一个类，则定位ID;）

鼠标悬停项目具有确定的类时显示详细信息

2 个答案: