html - Using a:hover to display a div -

i'm trying display div class won't show. i'm not sure i'm doing wrong. here's i'm doing.

so, have table. point of hover on 1 of tables contents , show display more details of link hovered. in case "hover me!"

file.html

<div id="bigbody"> <table class="tableclass"> <tr> <td> <a class="hoverheretopopup">hover me! </a> </td> </tr> <table> /*just keep table short */   <div class="hoverpopup">     <p>this 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 styles attempt debug issue:

a.hoverheretopopup {     color:red;     border:green dotted; }  a.hoverheretopopup:hover {     color:white;     border:yellow dashed; } 

the hover changing color div isn't showing.

what doing wrong?

viewing on chrome.

the hover inside table. inside displaydiv, in container there's divcontainer popup. so, big box has 2 small boxes, 1 hover(a table) , another(a div) pop up. problem????

if understand correctly, hidden div needs inside div gets hover.

something this:

<div>     hover on me     <p>this hidden</p> </div> 

see: http://jsfiddle.net/webbymatt/urwnz/

the current way have markup means not work css. need put hidden area inside hoverable div. this:

<div id="bigbody">   <table class="tableclass">     <tr>       <td>         <a class="hoverheretopopup">           hover me!            <p>this hover</p>         </a>       </td>     </tr>   </table> /*just keep table short */  </div> 

then css

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