鼠标光标移动时div消失

Question

当光标在 Div show-on-hover 内时，如何保持悬停 Div 打开？ 现在它会随着光标移开而消失。我需要“悬停在我身上！”链接到 div 之外。

更新：

我正在尝试构建导航，因此当访问者将鼠标悬停在甜点上时，它会显示一个子菜单。请看下面的代码

<table width="66%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="4%" height="265" align="left" valign="top">&nbsp;</td>
    <td width="26%" align="left" valign="top"><br> <br>
    <span style="font-family: Arial; font-size:38px; color:#000; line-height: 30px; letter-spacing:5px;">Navigation</span>
    
    <p style="font-family: Nunito; font-size:15px; color:#485965; letter-spacing:0px; text-decoration:none;">
     </p>
    <p style="font-family: Nunito; font-size:15px; color:#485965; letter-spacing:0px; text-decoration:none;"> </p>
    <p style="font-family: Nunito; font-size:15px; color:#485965; letter-spacing:0px; text-decoration:none;">&nbsp;</p>
    <p style="font-family: Nunito; font-size:15px; color:#485965; letter-spacing:0px; text-decoration:none;">
    <span style="font-family: oswald; font-size:20px; color:#aa1b1b; text-transform:uppercase; line-height: 20px; letter-spacing:5px;"></span></p>
    <p style="font-family: Nunito; font-size:15px; color:#485965; letter-spacing:0px; text-decoration:none;">&nbsp;</p>
    
    
    </td>
    <td width="30%" align="center" valign="top">
      <br>
      
      <table width="100%" border="0" cellspacing="0" cellpadding="0" style="">
        <tr>
          <td width="1%"></td>
          <td width="94%"><a target="_blank"  href="" style="font-family: 'arial', sans-serif; font-size:17px; color:#333; text-decoration:none;">Home</a></td>
          <td width="5%">&nbsp;</td>
        </tr>
        <tr>
          <td></td>
          <td><a target="_blank" href="" style="font-family: arial; font-size:17px; color:#333; letter-spacing:0px; text-decoration:none; ">Cooking</a></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td></td>
          <td><a target="_blank" href="" style="font-family: arial; font-size:17px; color:#333; letter-spacing:0px; text-decoration:none;">Receipt</a></td>
          <td>&gt;</td>
        </tr>
        <tr>
          <td></td>
          <td bgcolor="#E5F0FA"><a target="_blank" href="" style="font-family: arial; font-size:17px; color:#333; letter-spacing:0px; text-decoration:none;">Desserts</a></td>
          <td bgcolor="#E5F0FA">&gt;</td>
        </tr>
        <tr>
          <td></td>
          <td><a target="_blank" href="" style="font-family: arial; font-size:17px; color:#333; letter-spacing:0px; text-decoration:none;">Blog</a></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td></td>
          <td><a target="_blank" href="" style="font-family: arial; font-size:17px; color:#333; letter-spacing:0px; text-decoration:none;">Downloads</a></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td></td>
          <td><a target="_blank" href="" style="font-family: arial; font-size:17px; color:#333; letter-spacing:0px; text-decoration:none;">Contact </a></td>
          <td>&nbsp;</td>
        </tr> 
  </table>    
    </td>
    <td width="1%" align="left" valign="top">&nbsp;</td>
    <td width="39%" align="left" valign="top" bgcolor="#e5f0fa">
     <!--- SUB NAV---->
    <p>
      <strong>Sub Menu</strong><br><br>      
      Chocolate<br>
      Ice Cream<br>
      Cinnamon-Honey<br>
      Cookies<br>
      Cake
      <br>      
    </p>   
   <!--- /SUB NAV---->  
   </td>
  </tr>
</table>

Answer 1

一种方法是在加载时隐藏.show-on-hover。
然后，您可以在 .hoverable 或 .show-on-hover 悬停时显示它。

我还将.hoverable 设置为display:block 并将<ul> 边距更改为填充，以消除.hoverable 和.show-on-hover 之间悬停区域的间隙。

.show-on-hover {
  display: none;
}

.hoverable {
  display: block;
}

.show-on-hover ul {
  margin-top:0;
  padding-top:1em;
}

.hoverable:hover+.show-on-hover,
.show-on-hover:hover {
  display: block;
}

<a class="hoverable">Hover over me!</a>
<div class="show-on-hover">
  <ul>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
  </ul>
</div>

---

另一种方法是将.hoverable 放入.show-on-hover。
但这会改变 HTML 的结构，这可能是不可取的。

.show-on-hover ul {
  display: none;
}

.show-on-hover:hover ul {
  display: block;
}

<div class="show-on-hover">
  <a>Hover over me!</a>
  <ul>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
  </ul>
</div>