Using a:hover to display a div - html

Question

I'm trying to display a div class but it won't show. I'm not sure what I'm doing wrong. Here's what I'm doing.
So, I have a table. The point of this is to hover on one of the tables contents and show a display with more details of the link hovered. In this case "Hover Me!"
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;
}
I added some styles to attempt to debug my issue:
a.hoverHereToPopUp {
color:red;
border:green dotted;
}
a.hoverHereToPopUp:hover {
color:white;
border:yellow dashed;
}
The hover is changing the color but the div isn't showing.
What am I doing wrong?
Viewing this on chrome.
The Hover is inside a table. which is inside a DisplayDiv, in that container there's another divContainer for the popUp. So, BIG box has 2 Small Boxes, one with the Hover(a table) and another(a div) for the Pop Up. Is this the problem????

Answer 1

If I understand correctly, the hidden div needs to be inside the div which gets the hover.
Something like this:
<div>
Hover over me
<p>This is hidden</p>
</div>
See: http://jsfiddle.net/webbymatt/URwNz/
The current way you have your markup means this will not work with CSS. What you need to do is put the hidden area INSIDE the hoverable div. Like this:
<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>
Then with your CSS
.hoverHereToPopUp p {
display: none;
}
.hoverHereToPopUp:hover p {
display: block;
}

Answer 2

From what #Slevin pointed out, the code provided is working fine. I would recommend look at the rest of your code of inspecting the live code to see if you have the element you're trying to show hidden elsewhere.