Rollover table shows hidden span class text with css


Tags: jquery,html,css,table,hover

Problem :

I have a class that upon rollover of the entire row with the mouse, I'd like some text that is contained within one of the cells to appear. If possible, can this be done with css, and how is it possible to have a rollover of the whole table row show the text previously hidden in one of the cells, the same should also apply for any other rows that have a cell in them with their own hidden text within a cell. I understand it might need jquery to accomplish this, but if possible in just pure css this would be preferred.

Here's an example, the rollovers on the forum names showing the child forums: http://www.kanyetothe.com/forum/

Thanks!



Solution :

It can easily be achieved with css.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<style>
    .hidden {
        display: none;
    }

    tr:hover .hidden {
        display: block;
    }
</style>

<table>
    <tr>
        <td>Row 1 Column 1</td>
        <td class="hidden">Row 1 Column 2</td>
        <td>Row 1 Column 3</td>
    </tr>
    <tr>
        <td>Row 2 Column 1</td>
        <td class="hidden">Row 2 Column 2</td>
        <td>Row 2 Column 3</td>
    </tr>

</table>

</body>
</html>

    CSS Howto..

    HTML/CSS How to format Text and have an Image floating next to it

    How to get background image/ image to stretch to fill container via CSS?

    How to use CSS transforms to translate product info into view

    How do I style a circular vertically-loading progress bar?

    How to change menu icon when scrolling to specific sections of the website?

    how to include absolute css path using add_editor_style() in wordpress

    How to remove blue underline on text in Chrome - CSS?

    how to change CSS on the youtube subscribe widget

    how to remove a TR which have a TD that contain specific text

    How to add threshhold onclick() jQuery?

    how can i add style with CSS to