使用:hover来显示div

时间:2013-09-04 15:32:20

标签: html css

我正在尝试显示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个小盒子,一个带有悬停(一个表格),另一个用于弹出窗口。这是问题????

2 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:0)

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