悬停时纯css3表格覆盖

时间：2014-07-22 09:44:54

标签： html css html5 css3 web

我试图制作一个结构如下的简单表：

<table>
    <tr>
        <td>Number</td>
        <td>Name</td>
        <td>E-mail</td>
        <td>Role</td>
    </tr>
    <tr>
        <td>1</td>
        <td>James</td>
        <td>Hetfield</td>
        <td>Owner</td>
    </tr>
    <tr class="hidden">
        <td><!-- checkbox --></td>
        <td colspan="2"> <!-- link to details --></td>
        <td><!-- buttons: edit, remove --></td>
    </tr>
</table>

因此，在有数据的行之后，存在带控件的隐藏行，这应该＆＃34;替换＆＃34;鼠标悬停时确切的行，当鼠标在外面时消失。尝试使用position：relative on row和absolute on hidden + display：none / block on hover，但是失败了。 ：（

3 个答案:

答案 0 :(得分：1)

你能在每个tr中添加“动作单元格”，只是在悬停时显示/隐藏它们吗？

<强> HTML ：

<table>
    <tr>
        <td>Number</td>
        <td>Name</td>
        <td>E-mail</td>
        <td>Role</td>
    </tr>
    <tr>
        <td class="info-td">1</td>
        <td class="info-td">James</td>
        <td class="info-td">Hetfield</td>
        <td class="info-td">Owner</td>
        <td class="action-td">checkbox</td>
        <td class="action-td" colspan="2">details --></td>
        <td class="action-td">buttons</td>
    </tr>
</table>

<强> CSS ：

.action-td {
    display: none;
}
tr:hover > .info-td {
    display: none;
}
tr:hover > .action-td {
    display: table-cell;
}

小提琴：http://jsfiddle.net/V9Qk7/

答案 1 :(得分：1)

我真的希望这是一个解决方案！我只在Chrome中试用过它。

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                border: 0 transparent none;
                color: rgba(0, 0, 0, .7);
                background-color: transparent;
                font-family: monospace;
                font-weight: normal;
                font-size: 12px;
                text-align: left;
                text-transform: none;
                text-decoration: none;
            }
            table{
                display: table;
                border-collapse: collapse;
            }
            table>thead{display: table-header-group}
            table>tbody{display: table-row-group}
            table>tfoot{display: table-footer-group}
            table>thead>tr,
            table>tbody>tr,
            table>tfoot>tr{display: table-row}
            table>thead>tr>th,
            table>tbody>tr>th,
            table>tfoot>tr>th,
            table>thead>tr>td,
            table>tbody>tr>td,
            table>tfoot>tr>td{
                display: table-cell;
                padding: 5px;
            }



            table.list>thead>tr{
                border-bottom: 2px rgba(120, 120, 120, 1) solid;
            }
            table.list>thead>tr>th,
            table.list>thead>tr>td,
            table.list>tbody>tr>th:first-child,
            table.list>tbody>tr>td:first-child,
            table.list>tbody>tr>th:first-child>span:first-of-type,
            table.list>tbody>tr>td:first-child>span:first-of-type{
                font-weight: bold;
                text-transform: uppercase;
            }
            table.list>thead>tr>th:first-child,
            table.list>thead>tr>td:first-child,
            table.list>tbody>tr>th:first-child,
            table.list>tbody>tr>td:first-child,
            table.list>tfoot>tr>th:first-child,
            table.list>tfoot>tr>td:first-child{
                border-right: 2px rgba(120, 120, 120, 1) solid;
            }
            table.list>thead>tr>th:not(:first-child),
            table.list>thead>tr>td:not(:first-child),
            table.list>tbody>tr>th:not(:first-child),
            table.list>tbody>tr>td:not(:first-child),
            table.list>tfoot>tr>th:not(:first-child),
            table.list>tfoot>tr>td:not(:first-child){
                border-left: 1px rgba(220, 220, 220, 1) solid;
            }
            table.list>tbody>tr:nth-child(even){
                background-color: rgba(240, 240, 240, 1);
            }

            table.list>tbody>tr a{
                display: inline;
                text-transform: uppercase;
                color: rgba(20, 120, 220, 1);
            }

            /**  I think the most important part of CSS starts here  **/
            table.list>tbody>tr>th.rotation>span,
            table.list>tbody>tr>td.rotation>span{
                display: inline-block;

                transition-duration: .7s;
                -o-transition-duration: .7s;
                -moz-transition-duration: .7s;
                -webkit-transition-duration: .7s;
            }
            /** I prefered to apply absolute layout on :first-of-type because it seem to take less place than other **/
            table.list>tbody>tr>th.rotation>span:first-of-type,
            table.list>tbody>tr>td.rotation>span:first-of-type{
                position: absolute;
            }
            table.list>tbody>tr:hover>th.rotation>span:last-of-type,
            table.list>tbody>tr:hover>td.rotation>span:last-of-type,
            table.list>tbody>tr>th.rotation>span:first-of-type,
            table.list>tbody>tr>td.rotation>span:first-of-type{
                opacity: 1;
            }
            table.list>tbody>tr:hover>th.rotation>span:first-of-type,
            table.list>tbody>tr:hover>td.rotation>span:first-of-type,
            table.list>tbody>tr>th.rotation>span:last-of-type,
            table.list>tbody>tr>td.rotation>span:last-of-type{
                opacity: 0;
            }
            table.list>tbody>tr:hover>th.rotation>span:first-of-type,
            table.list>tbody>tr:hover>td.rotation>span:first-of-type{
                transform: rotateY(90deg);
                -moz-transform: rotateY(90deg);
                -webkit-transform: rotateY(90deg);
            }
        </style>
    </head>
    <body>
        <table class="list">
            <thead>
                <tr>
                    <th>
                        #
                    </th>
                    <th>
                        name
                    </th>
                    <th>
                        email
                    </th>
                    <th>
                        role
                    </th>
                    <th>
                        carreer
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="rotation">
                        <span>1</span>
                        <span>
                            <input type="checkbox"/>
                        </span>
                    </td>
                    <td>
                        James
                    </td>
                    <td>
                        Hetfield
                    </td>
                    <td>
                        Owner
                    </td>
                    <td class="rotation">
                        <span>
                            Acount carreer
                        </span>
                        <span>
                            <a href="#">Show</a>
                            <a href="#">Édit</a>
                            <a href="#">Delete</a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="rotation">
                        <span>2</span>
                        <span>
                            <input type="checkbox"/>
                        </span>
                    </td>
                    <td>
                        James
                    </td>
                    <td>
                        Hetfield
                    </td>
                    <td>
                        Owner
                    </td>
                    <td class="rotation">
                        <span>
                            Acount carreer
                        </span>
                        <span>
                            <a href="#">Show</a>
                            <a href="#">Édit</a>
                            <a href="#">Delete</a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="rotation">
                        <span>3</span>
                        <span>
                            <input type="checkbox"/>
                        </span>
                    </td>
                    <td>
                        James
                    </td>
                    <td>
                        Hetfield
                    </td>
                    <td>
                        Owner
                    </td>
                    <td class="rotation">
                        <span>
                            Acount carreer
                        </span>
                        <span>
                            <a href="#">Show</a>
                            <a href="#">Édit</a>
                            <a href="#">Delete</a>
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

答案 2 :(得分：0)

尝试此操作并根据您的需要进行修改。

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            tr{
                display: table-row;
                transition-duration: .7s;
                -o-transition-duration: .7s;
                -moz-transition-duration: .7s;
                -webkit-transition-duration: .7s;
            }
            tr.hidden{
                opacity: 0;
            }
            table:hover tr.hidden{
                opacity: 1;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>Number</td>
                <td>Name</td>
                <td>E-mail</td>
                <td>Role</td>
            </tr>
            <tr>
                <td>1</td>
                <td>James</td>
                <td>Hetfield</td>
                <td>Owner</td>
            </tr>
            <tr class="hidden">
                <td>
                    <input type="checkbox" id="rich"/>
                    <label for="rich">Rich ?</label>
                </td>
                <td colspan="2">
                    <a href="#">Show</a>
                </td>
                <td>
                    <a href="#">Édit</a>
                    <a href="#">Delete</a>
                </td>
            </tr>
        </table>
    </body>
</html>
相关问题
最新问题