Для отображения меню при наведении курсора на изображение

0

У меня есть тег div как меню и изображение, если я держу указатель мыши на изображении, я должен видеть меню, а по мыши меню не должно исчезать. Есть ли способ сделать это с помощью jquery?

<script type="text/javascript">
    $(document).ready(function () {
        $("img.image-selector").click(function () {
            alert($(this).attr("entity_id"));
        });
    });
</script>


<body>
   <form id="form1" runat="server" class="style1">
   <div id='one' style="color: #FFFFFF; display:none; background-color: #92DF7B;">
       <ul>
           <li>General</li>
           <li>Policy</li>
           <li>Manuals</li>
           <li>HEXA Documents</li>
           <li>ISO</li>
       </ul>
   </div>

Я смущен, что следует после этого.

  • 0
    пожалуйста, сделайте рабочую скрипку: jsfiddle.net
  • 0
    В документах jquery есть хороший пример использования mouseenter и отпуска мыши: api.jquery.com/mouseout
Показать ещё 3 комментария
Теги:

2 ответа

2
Лучший ответ

Вам нужно привязать mouseenter и mouseleave на изображении, как show() ниже, и вызвать show() и hide() в div меню.

<script type="text/javascript">
    $(document).ready(function () {
        $("img.image-selector").mouseenter(function () {
            $('#one').show();
        });

        $("img.image-selector").mouseleave(function () {
            $('#one').hide();
        });
    });
</script>

Вот ссылка для селекторов JQuery

Поделиться
  • 0
    Но я могу знать, какой код я должен использовать для отображения меню?
  • 0
    $(yourmenu).show()
Показать ещё 3 комментария
0

Html

<img src="" id="menuimage"/>
        <ul class="hide">
           <li>General</li>
           <li>Policy</li>
           <li>Manuals</li>
           <li>HEXA Documents</li>
           <li>ISO</li>
       </ul>

Css

.menu{display:block}
.hide{display:none}

Jquery

<img src="" id="menuimage"/>
        <ul class="hide">
           <li>General</li>
           <li>Policy</li>
           <li>Manuals</li>
           <li>HEXA Documents</li>
           <li>ISO</li>
       </ul>

http://jsfiddle.net/fLE2Y/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню