我正在尝试显示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个小盒子,一个带有悬停(一个表格),另一个用于弹出窗口。这是问题????
答案 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指出,提供的代码工作正常。我建议您查看检查实时代码的其余代码,看看您是否有想要在其他地方隐藏的元素。