Как сделать меню выбранным с помощью мыши над константой, пока пользователь не выберет опцию в меню

0

У меня есть два изображения, при событии mouseover этих двух изображений отображаются соответствующие две строки меню.
Мне нужно выбрать опцию в меню, но при mouseout меню исчезает.

Что я могу сделать, чтобы сделать его лучше?

Ниже мой код:

 <script type="text/javascript">
        $(document).ready(function ()
     {
            $("#Image1").mouseover(function () {
                $("#one").show();
            });
            $("#Image1").mouseout(function () {
                $("#one").hide();
            });
        });

        $(document).ready(function () {
            $("#Image2").mouseover(function () {
                $("#two").show();
            });
            $("#Image2").mouseout(function () {
                $("#two").hide();
            });
        });

    </script>    
      <div id='one'style="border: 10px double #CCCCCC; color: #FFFFFF; background-color: #92DF7B; width: 134px; height: 142px; position: absolute; top: 3px; left: 420px; ">
               <ul>
                   <li>General</li>
                   <li>Policy</li>
                   <li>Manuals</li>
                   <li>HEXA Documents</li>
                   <li>ISO</li>
               </ul>
           </div>
            <div id='two' style="color: #FFFFFF;  background-color: #92DF7B; position: absolute; top: 159px; left: 35px; width: 131px; height: 152px; display:none;">
                 <ul>
                     <li>General</li>
                     <li>Policy</li>
                     <li>Manuals</li>
                     <li>HEXA Documents</li>
                     <li>ISO</li>
                 </ul>
             </div>
        <div style="border-color: #FFFFFF; position:absolute; top:176px; left: 188px; height: 403px; width: 534px;">

            <asp:Image  ID="Image1" runat="server" 
                   ImageUrl="~/Images/New Bitmap Image(1).bmp" Width="180px" 
                 CssClass="class1" Height="96px" />

               <br />

               <asp:Image ID="Image2" runat="server" 
                   ImageUrl="~/Images/New Bitmap Image (2).bmp" />

        </div>
Теги:

2 ответа

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

Попробуй это

<script type="text/javascript">
        $(document).ready(function ()
     {
            $("#Image1").mouseover(function () {
                $("#one").show();
                 $("#two").hide();
            });

            $("#one").mouseout(function () {
                $("#one").hide();
            });

        });

        $(document).ready(function () {
            $("#Image2").mouseover(function () {
                $("#two").show();
                $("#one").hide();
            });

            $("#two").mouseout(function () {
                $("#two").hide();
            });

        });

    </script>
Поделиться
  • 0
    Это не работает :(, я не могу выбрать опцию из меню, когда я нажимаю на меню, оно становится скрытым
  • 0
    да вот что ... я скрываю меню после нажатия на него ... если ты не хочешь, то позволь мне убрать это
Показать ещё 5 комментариев
0

Скрывать меню только нажатием кнопки li,

<script type="text/javascript">
    $(document).ready(function ()
 {
        $("#Image1").mouseover(function () {
            $("#one").show();
        });



        $("#one li").click(function () {
            $("#one").hide();
        });

    });

    $(document).ready(function () {
        $("#Image2").mouseover(function () {
            $("#two").show();
        });



       $("#two li").click(function () {
            $("#two").hide();
        });
    });

</script>
Поделиться
  • 0
    Это работает нормально, но есть ли способ скрыть меню, если я нажму второе изображение?

Ещё вопросы

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