Как создать выпадающее меню при наведении указателя мыши на изображение?

Этот мой код jQuery для отображения выпадающего меню при наведении указателя мыши на изображение. Imgbtn_Dsp - идентификатор изображения, а nav_menu - это идентификатор списка, но он не работает.Как создать выпадающее меню при наведении указателя мыши на изображение?

<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

Измените сценарий, как этот

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

Вы можете увидеть треску в действии в этом jsfiddle.

источник

2016-05-31 06:15:07

Избавьтесь от ДИВ и изменить 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

Как создать выпадающее меню при наведении указателя мыши на изображение?

ответ

Смежные вопросы