Javascript 在图像上方的鼠标上显示菜单_Javascript_Jquery_Html

Javascript 在图像上方的鼠标上显示菜单

javascript jquery html

Javascript 在图像上方的鼠标上显示菜单,javascript,jquery,html,Javascript,Jquery,Html,我有一个div标签作为菜单和一个图像，如果我将鼠标光标保持在图像上，我必须看到菜单，在鼠标离开菜单时，菜单应该不会消失。有没有办法使用jquery来做到这一点 <script type="text/javascript"> $(document).ready(function () { $("img.image-selector").click(function () { alert($(this).attr("entity_id"))

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


$（文档）.ready（函数（）{
$（“img.image选择器”）。单击（函数（）{
警报（$（this.attr（“实体id”））；
});
});

一般的
政策
手册
HEXA文件
ISO

我不知道接下来要做什么。

您需要绑定下图中的

mouseenter

和

mouseleave

事件，并在菜单

div

上调用

show（）

和

hide（）

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

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


$（文档）.ready（函数（）{
$（“img.image选择器”）.mouseenter（函数（）{
$（“#一”）.show（）；
});
$（“img.image选择器”）.mouseleave（函数（）{
$（“#一”）.hide（）；
});
});

下面是JQuery选择器的示例

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>

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>



一般的
政策
手册
HEXA文件
ISO

请做一把工作小提琴：jquery文档中有一个使用鼠标键和鼠标离开的好例子：请避免使用内联样式…K Dave谢谢，让我试着研究一下，下次我会非常小心的T J，谢谢，但我能知道我应该使用什么代码来显示菜单吗？还有一个疑问，如果我有多个图像及其相关菜单，该怎么办。我只想在鼠标悬停时一次显示一个菜单。那么它会工作的。假设第二个菜单id是'two'，我该怎么办？你可以看看JQuery选择器。。。使用它，您可以显示/隐藏任意数量的菜单。您可以使用id、classess、tags等进行选择

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