Jquery 如何仅在鼠标悬停时显示div并在鼠标离开时隐藏

我有一个菜单，我试图显示它只有当一个图像图标悬停使用jquery请帮助我。我使用了下面的代码，但它不起作用。当鼠标离开时，它会使它出现但不会消失

$(document).ready(function() {
    $(".hover").on("mouseenter", function() {
        $(".overlay").show();
    }).on("mouseleave", function() {
        $(".overlay").hide();
    });
});

这里是Html

<----div which is to be hovered---->
<div class="box"><img alt="101helper-menu" class="hover" src="http://2.bp.blogspot.com/-JzmiWYq3mb4/VYHPosbeBcI/AAAAAAAACuI/J0EQbhp2oKY/s1600/menu-icon-101helper.png">

<div class="overlay">
<div id="cssmenu"><ul><li><a href="http://101helper.blogspot.com">Home</a></li>
<li><a href="http://101helper.blogspot.com/search/label/Blogger%20Tips%20And%20Tricks">Blogger Tips and tricks</a></li>
<li class="active has-sub"><a href="http://101helper.blogspot.com/search/label/Blogger%20Seo%28Search%20Engine%20Optimization">Seo</a><ul>
<li><a href="http://101helper.blogspot.com/search/label/Blogger%20Seo%28Search%20Engine%20Optimization">Blogger Seo</a></li>
<li><a href="http://101helper.blogspot.com/search/label/Google%20Webmaster%20Tools%20tutorials">Google Webmaster Tools</a></li></ul></li>
<li><a href="http://101helper.blogspot.com/search/label/Blogger%20menus">Menus for blogger</a></li>
<li><a href="http://101helper.blogspot.com/search/label/Blogger%20Widgets%20And%20Gadgets">Blogger widgets and gadgets</a></li>
<li><a href="http://101helper.blogspot.com/search/label/Beginner%20to%20blogging">Beginner to blogging</a></li>
<li><a href="http://101helper.blogspot.com/search/label/Mobile%20Blogging">Mobile blogging</a></li>
<li><a href="http://101helper.blogspot.com/p/about.html">About</a></li>
<li><a href="http://101helper.blogspot.com/p/hire-us.html">Hire us</a></li>
<li><a href="http://101helper.blogspot.com/p/contact-me.html">Contact</a></li>
<li><a href="http://101helper.blogspot.com/p/menusitemap.html">Sitemap</a></li></ul></div></div></div>

---

这是因为您已在具有类

hover

的图像上注册了

hover

，而不是在div

overlay

上注册。因此，只有当鼠标离开该图像时，该div才会被隐藏

尝试执行以下操作：

$(document).ready(function() {
    $(".hover").on("mouseenter", function() {
       $(".overlay").show();
    });
    $(".overlay").on("mouseleave", function() {
       $(this).hide();  //or $('.overlay').hide()
    });
});

检测到您的页面存在问题

我试着在你的页面上运行我自己的jQuery代码，你知道我发现了什么吗？ 您的页面中有许多版本的jQuery正在加载，而一些较旧版本的jQuery会覆盖较新版本

我怎么知道的？ 运行jQuery的

.on（）

方法会导致类型错误。根据，在1.7版中添加了

on（）

方法

解决方案：由于我无法让您的页面仅加载最新的jQuery，因此我尝试了上面的代码，使用了较旧的样式，因此以下代码有效：

$(function() {
   $(".hover").mouseenter(function() {
      $(".overlay").show();
   });
   $(".overlay").mouseleave(function() {
      $(this).hide();  //or $('.overlay').hide()
   });
});

调用

$（.overlay”）.hide（）在<代码>$（“.hover”）.on（）之前


$（文档）.ready（函数（）{
$（“.overlay”）.hide（）；
$（“.hover”）。在({
“mouseenter”：函数（）{
$（“.overlay”）.show（）；
}
，“mouseleave”：函数（）{
$（“.overlay”）.hide（）；
}
});
});































FYI，您可以用纯CSSYE来实现这一点，但我想用jquery或javascript@Pranav我已经添加了htmlI，并将您的代码放在JSFIDLE上，它运行得非常好。。。我做的唯一一件事就是在加载时隐藏覆盖我已经尝试过这段代码，它只能显示它，但我希望它在用户将鼠标悬停在菜单上时显示，并在用户离开菜单时消失。您的代码工作正常，但当鼠标离开控制台执行代码时，它应该消失，为我们工作很好。你查过我的博客了吗？顺便说一句，我已经使用了更新后的代码，但仍然不起作用。我知道，但它在我的博客中不起作用。你可以在这里查看@FahimRaza，试试我的更新答案。同时，为了获得更好的结果，您可以将
.hover
替换为它的直接父项，即
.box
。谢谢兄弟，但@Nageshwar Reddy帮助了我，它工作正常
$(function() {
   $(".hover").mouseenter(function() {
      $(".overlay").show();
   });
   $(".overlay").mouseleave(function() {
      $(this).hide();  //or $('.overlay').hide()
   });
});