如何在鼠标悬停时显示列表

Question

<nav>
<a href="login.html" class="dropdown-content" style="text-align: center"><span id="login">您好</span><i class="login"></i></a>
<a href="9.html"><i class="like"></i></a>
<a href="7.html"><i class="file"></i></a>
<a href="4.html" style="text-align: center"><span id="counter">0</span><i class="drink"></i></a>
</nav>

当鼠标悬停（悬停）时，我可以在登录时创建一个列表吗？

#login{
    color: #cb3e31;
    font-size: 18px;
    top: 31px;
    margin-top: 30px;
    margin-left: 15px;
    width: auto;
    text-align: center;
}

Answer 1

首先使用div元素包装你的列表（更容易处理）或逐个显示元素

<nav>
    <a href="login.html" class="dropdown-content" style="text-align: center">
       <span id="login">您好</span><i class="login"></i>
    </a>
    <div id="list">
        <a href="9.html"><i class="like"></i></a>
        <a href="7.html"><i class="file"></i></a>
        <a href="4.html" style="text-align: center"><span id="counter">0</span><i class="drink"></i></a>
    </div>
</nav>

<script>
    $("#login").hover(
      function() {
        // show element
        $('#list').show();
      }, function() {
        // hide element
        $('#list').hide();
      }
    );
</script>