イメージの上にマウスを置いたときにドロップダウンメニューを作成するにはどうすればいいですか？

画像の上にマウスを置いたときにドロップダウンメニューを表示するための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>

出典

2016-05-31 Divyaanand Sinha

あなたはこのjsfiddleで動作中のCODを見ることができます。この

<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>

のようにスクリプトを変更します。

出典

2016-05-31 06:15:07

はdiv要素を取り除くと、あなたはそれを正しく仕事をしたい場合は、このようulを変更しなさい;）

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

出典

2016-05-31 06:16:19

それは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}

うまくいけば、あなたはそれに有用

います

出典

2016-05-31 07:36:46

イメージの上にマウスを置いたときにドロップダウンメニューを作成するにはどうすればいいですか？

答えて

関連する問題