隐藏的div不会显示onhover图像

Question

为什么我的悬停功能不起作用？

$("#staff").on("hover", function() {
  $("#staffdn").show();
});

#navbar {
  position: fixed;
  border-style: solid;
  border-color: #ffd3d9;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border-width: 20px;
  left: -20px;
  background-color: #ffd3d9;
}
#staffdn {
  position: fixed;
  border-style: solid;
  border-color: #ffd3d9;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border-width: 20px;
  left: 100px;
  top: 100px;
  background-color: #ffd3d9;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
  <ul>
    <li><a href="Home.html"><img src="Images/Nav_head/home.png"></a></li>
    <li><img id="Staff" src="Images/Nav_head/fourms.png"></li>
    <li><a href="Fourms.html"><img src="Images/Nav_head/fourms.png"></a></li>
    <li><a href="About.html"><img src="Images/Nav_head/about.png"></a></li>
    <li><a href="#"><img src="Images/Nav_head/Games.png"></a></li>
  </ul>
</div>
<div id="staffdn">
  <ul>
    <li><img src="Staff-memebers.png"></li>
    <li><img src="commands.png"></li>
  </ul>
</div>

Answer 1

你应该：

• 不使用visibility: hidden，而是在加载时使用display: none。
• 加载页面时隐藏。
• 将hover用作功能，而不是event。
• 将所有脚本放在$(document).ready()内以在DOM Loaded元素上运行。
• 并将CSS更改为：left: 80px; top: 60px;。

这应该有效：

$(function () {
  $("#staffdn").hide();
  $("#Staff").hover(function() {
    $("#staffdn").show();
  }, function () {
    $("#staffdn").hide();
  });
});

<强>段

$(function () {
  $("#staffdn").show();
  $("#Staff").hover(function() {
    $("#staffdn").show();
  }, function () {
    $("#staffdn").hide();
  });
});

#navbar {
  position: fixed;
  border-style: solid;
  border-color: #ffd3d9;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border-width: 20px;
  left: -20px;
  background-color: #ffd3d9;
}
#staffdn {
  position: fixed;
  border-style: solid;
  border-color: #ffd3d9;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border-width: 20px;
  left: 100px;
  top: 100px;
  background-color: #ffd3d9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="navbar">
  <ul>
    <li><a href="Home.html"><img src="Images/Nav_head/home.png"></a></li>
    <li><img id="Staff" src="Images/Nav_head/fourms.png"></li>
    <li><a href="Fourms.html"><img src="Images/Nav_head/fourms.png"></a></li>
    <li><a href="About.html"><img src="Images/Nav_head/about.png"></a></li>
    <li><a href="#"><img src="Images/Nav_head/Games.png"></a></li>
  </ul>
</div>
<div id="staffdn">
  <ul>
    <li><img src="Staff-memebers.png"></li>
    <li><img src="commands.png"></li>
  </ul>
</div>