html - 使用 :hover to display a div

Question

我正在尝试显示一个 div 类，但它不会显示。我不确定我做错了什么。这就是我正在做的事情。

所以，我有一张 table 。这样做的目的是将鼠标悬停在其中一个表格内容上，并显示一个包含悬停链接的更多详细信息的显示。在这种情况下，“悬停我!”

文件.html

<div id="bigBody">
<table class="tableClass">
<tr>
<td>
<a class="hoverHereToPopUp">Hover Me! </a>
</td>
</tr>
<table> /*Just to keep the table short */ 

<div class="hoverPopUp">
    <p>This is a Hover</p>
</div> /*EO HoverPopUp */
</div> /*EO bigBody */

样式.css

div.hoverPopUp {
    display:none;
    width:auto;
    height:auto;
    border:dotted purple;
}

a.hoverHereToPopUp:hover + div.hoverPopUp {
    display: block;
}

我添加了一些样式来尝试调试我的问题:

a.hoverHereToPopUp {
    color:red;
    border:green dotted;
}

a.hoverHereToPopUp:hover {
    color:white;
    border:yellow dashed;
}

悬停改变了颜色，但没有显示 div。

我做错了什么？

在 chrome 上查看。

悬停在表格内。它位于 DisplayDiv 内部，在该容器中还有另一个用于弹出窗口的 divContainer。因此，BIG box 有 2 个 Small Boxes，一个带有 Hover(表格)，另一个(div)用于弹出窗口。这是问题吗？？？？

Answer 1

如果我理解正确，隐藏的 div 需要在悬停的 div 内部。

像这样:

<div>
    Hover over me
    <p>This is hidden</p>
</div>

参见: http://jsfiddle.net/webbymatt/URwNz/

您当前的标记方式意味着这不适用于 CSS。您需要做的是将隐藏区域放在可悬停的 div 中。像这样:

<div id="bigBody">
  <table class="tableClass">
    <tr>
      <td>
        <a class="hoverHereToPopUp">
          Hover Me! 
          <p>This is a Hover</p>
        </a>
      </td>
    </tr>
  </table> /*Just to keep the table short */ 
</div>

然后用你的 CSS

.hoverHereToPopUp p {
  display: none;
}
.hoverHereToPopUp:hover p {
  display: block;
}