如何只在鼠标悬停时显示div，并在鼠标离开时隐藏
如何只在鼠标悬停时显示div，并在鼠标离开时隐藏
提问于 2015-08-30 14:11:51
我有一个菜单，我试图显示它只有当一个图像图标是徘徊使用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>回答 3
Stack Overflow用户
回答已采纳
发布于 2015-08-30 14:25:50
这是因为您已经在具有类hover的映像上注册了hover，而不是在div overlay itlself上注册的。所以只有当你的鼠标离开那个图像时，这个div才会被隐藏。
尝试如下所示：
$(document).ready(function() {
$(".hover").on("mouseenter", function() {
$(".overlay").show();
});
$(".overlay").on("mouseleave", function() {
$(this).hide(); //or $('.overlay').hide()
});
});问题，您的页面检测到了！
我试着在你的页面上运行我自己的jQuery代码，你知道我发现了什么吗？您的页面加载了许多版本的jQuery，而且某些旧版本的jQuery会覆盖较新的版本。
我怎么知道这个？运行jQuery的.on()方法会导致类型错误。根据文档，on()方法是在版本1.7中添加的。
解决方案：，因为我不能使您的页面只加载最新的jQuery，所以我尝试了上述代码的旧样式，因此，下面的代码起了作用：
$(function() {
$(".hover").mouseenter(function() {
$(".overlay").show();
});
$(".overlay").mouseleave(function() {
$(this).hide(); //or $('.overlay').hide()
});
});Stack Overflow用户
发布于 2015-08-30 14:23:44
$("#cssmenu").hide();
$(".hover").mouseover(function () {
$("#cssmenu").slideDown('slow');
});
$(".overlay").mouseleave(function () {
$("#cssmenu").slideUp('slow');
});Stack Overflow用户
发布于 2015-08-30 14:26:54
在$(".overlay").hide();之前调用$(".hover").on()
$(document).ready(function() {
$(".overlay").hide();
$(".hover").on({
"mouseenter": function() {
$(".overlay").show();
}
, "mouseleave": function() {
$(".overlay").hide();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32297440
复制相关文章
相似问题
腾讯云开发者
