Question

我有一个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>

我很困惑在此之后继续做什么。

Answer 1

您需要在下面的图片上绑定mouseenter和mouseleave个事件，并在菜单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选择器的link

Answer 2

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

在鼠标悬停图像时显示菜单

2 个答案: