Question

这是我的jQuery代码，用于在将鼠标悬停在图像上时显示下拉菜单。 Imgbtn_Dsp是图片的ID，nav_menu是列表的ID，但它不起作用。

<html>
  <head>
    <title>Dropdownlist Hover</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
    </script>
    <script>
      $('#Imgbtn_Dsp').mouseover(function() {
        $('#nav_menu').slideDown();
      });
    </script>
  </head>
  <body>
    <form id="form1">
      <img src="~/Image/Display.png" / id="Imgbtn_Dsp">
      <div id="nav_menu">
        <ul>
          <li id="l1">AAAAA</li>
          <li>BBBBB</li>
          <li>CCCCC</li>
          <li>DDDDD</li>
        </ul>
      </div>
      <div>
    </form>
  </body>
</html>

Answer 1

像这样修改你的剧本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $('#nav_menu').hide();
            $('#Imgbtn_Dsp').mouseover(function () {
                $('#nav_menu').slideDown();
            });
            $('#Imgbtn_Dsp').mouseleave(function () {
                $('#nav_menu').slideUp();
            });
        });
     </script>

您可以在此https://stackoverflow.com/a/12481177/2575115中看到鳕鱼的行动。

Answer 2

如果你想正确使用它，摆脱div并修改ul;）

<ul id="nav_menu" style="display: none">
    <li id="l1">AAAAA</li>
    <li>BBBBB</li>
    <li>CCCCC</li>
    <li>DDDDD</li>
</ul>

Answer 3

可以在没有jquery的情况下完成。你所要做的就是定义图像的父容器，列出一些css。

<div class="parentDIV">
 <img src="~/Image/Display.png" / id="Imgbtn_Dsp">
  <div id="nav_menu">
    <ul>
      <li id="l1">AAAAA</li>
      <li>BBBBB</li>
      <li>CCCCC</li>
      <li>DDDDD</li>
    </ul>
  </div>
</div>

现在定义一些css： -

.parentDIV{position:relative}
#nav_menu{position:absolute;
          left:0;top:99%;display:none;}

.parentDIV:hover #nav_menu{display:block}

希望你会发现它很有用

如何在将鼠标悬停在图像上时创建下拉菜单？

3 个答案: