How can i make this CSS Popup work?

Question

Hello,

i am not able to find the reason why this popup won't work. He recognizes the hover above the table, but it has no effect on the popup. The weird thing is, when i include the path to the table to the .popup class he won't do anything, not even modify the span itself. I assume it has something to do with the selectors, but the path works without span.popup. I don't get the problem because space means descendant, but it kills somehow the whole selection.

<div id="center">
<tr id="name">
<td class="description">Name</td>
<td>Hulu</td>
<span class="popup">
    This should be the text in the popup.
</span>
</tr>
</div>

----------css

div#center tr.name:hover {
    background-color:   white;
}

div#center tr#name span.popup {
    display:            none;
}

div#center tr#name:hover span.popup {
    display:        block;
    background:     white;
    border-style:   solid;
    border-width:   1px;
    border-radius:  15px;
    position:       absolute;
    top:            45%;
    left:           550px;
    padding:        20px;
    width:          450px;
}

I would be glad for some answers.

tonlap

Answer 1

You cannot have tr tags without a table tag. Moreover, you cannot have extraneous tags outside of the td tags within a tr for them to be valid. These are not being recognized. If you put table tags around the table row and the span inside a td, then it will work more or less as you intend. Instead of using the table row in such a way, any reason to not use two divs?

Answer 2

Follow this tutorial and modify your code appropriately: http://meyerweb.com/eric/css/edge/popups/demo.html

Answer 3

replace div with table?