Question

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

所以，我有一张桌子。这一点的重点是将鼠标悬停在其中一个表格内容上，并显示一个显示链接悬停链接的更多详细信息。在这种情况下“悬停我！”

file.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 */

的style.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中，在该容器中有另一个popUp的divContainer。因此，BIG盒子有2个小盒子，一个带有悬停（一个表格），另一个用于弹出窗口。这是问题????

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

Answer 2

从@Slevin指出，提供的代码工作正常。我建议您查看检查实时代码的其余代码，看看您是否有想要在其他地方隐藏的元素。

使用：hover来显示div

2 个答案: