CODEWITHSUNDEEP
htmlcss
Jonathan Wood
Jonathan Wood

Reputation: 67355

Show Item when Hover Over Parent

I have an HTML table and I'd like the contents of one cell (<td>) hidden unless the mouse hovers anywhere over the parent row (<tr>).

It's pretty straight forward to show an element on hover, but I'm not sure how to show another element than the one being hovered over.

Can this be done with CSS alone, or do I need some sort of JavaScript? (I have jQuery and jQuery UI available.)

Upvotes: 2

Views: 1620

Answers (3)

Andrei S
Andrei S

Reputation: 6516

What I would do is set up a div inside that td, set it's opacity to 0 and add a transition like this

.command-panel {
   opacity: 0;
   -moz-transition: opacity 0.3s ease 0s;
   -webkit-transition: opacity 0.3s ease 0s;
   -ms-transition: opacity 0.3s ease 0s;
   -o-transition: opacity 0.3s ease 0s;
   transition: opacity 0.3s ease 0s;
}

tr:hover .command-panel {
   opacity: 1;
}

that way you'll have a nice but short enough animation

Upvotes: 2

Varada
Varada

Reputation: 17122

Please try this: 

    <head></head>
    <body>
        <table style="border: 1px solid #ccc">
            <tr  onmouseover="document.getElementById('mytd').style.display='block'"
                 onmouseout="document.getElementById('mytd').style.display='none'"
                 >
                <td>
                    fgfgdgd1

                </td>
                 <td style="display:none" id="mytd">
                    fgfgdgd1

                </td>

            </tr>

        </table>

    </body>
</html>

Upvotes: 1

Purag
Purag

Reputation: 17071

tr:hover > td {
    display:inline;
}

This is assuming whatever you're hiding is hidden with display:none;. Just use whichever property is appropriate for your situation.

EDIT: I changed it to display:inline because in the case of tables, you probably want the cells to remain next to each other rather than above and below.

Example.

Upvotes: 7

Related Questions