Question

我有一个菜单，我试图只在使用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">

＆lt; ----在悬停时显示的div，在鼠标离开时消失----＆gt;

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

Answer 1

$("#cssmenu").hide();

$(".hover").mouseover(function () {
    $("#cssmenu").slideDown('slow');
});
$(".overlay").mouseleave(function () {
    $("#cssmenu").slideUp('slow');
});

DEMO

Answer 2

那是因为您已在具有班级hover的图片上注册了hover，而不是在自己的overlay div上注册了$(document).ready(function() { $(".hover").on("mouseenter", function() { $(".overlay").show(); }); $(".overlay").on("mouseleave", function() { $(this).hide(); //or $('.overlay').hide() }); });。因此，只有当您的鼠标离开时，该图像才会被div隐藏。

尝试按以下步骤操作：

.on()

DEMO

检测到您的网页问题！

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

我怎么知道这个？运行jQuery的on()方法导致类型错误。根据{{3}}，版本1.7中添加了$(function() { $(".hover").mouseenter(function() { $(".overlay").show(); }); $(".overlay").mouseleave(function() { $(this).hide(); //or $('.overlay').hide() }); });方法。

解决方案：由于我无法使您的页面仅加载最新的jQuery，我尝试使用旧样式的上述代码，因此以下工作正常：

.done()

Answer 3

在$(".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>

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

3 个答案:

DEMO