隐藏 div 不会显示在悬停图像上

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 已加载元素上的运行。
并将 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>

隐藏 div 不会显示在悬停图像上

hidden div won't show onhover image

javascript

jquery

hover