堆栈内存溢出
  简体   繁体   English

悬停时纯CSS3表格行叠加

[英]Pure css3 table row overlay on hover

 原文  2014-07-22 09:44:53  0   3    html/ css/ html5/ css3/ web

问题描述

I'm trying to make a simple table with following structure: 我正在尝试制作一个具有以下结构的简单表： 

<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>

So, after a row with data there is hidden row with controls, which should "replace" exact row on mouse hover, and disappear when mouse is outside. 因此，在包含数据的行之后，存在带有控件的隐藏行，该行应“替换”鼠标悬停时的确切行，并在鼠标位于外部时消失。 Tried to do this with position: relative on row and absolute on hidden + display:none/ block on hover, but failed. 尝试使用以下位置执行此操作：相对位置在行上，绝对位置在隐藏+ display：none /悬停时阻止，但失败。 :( :(

3 个解决方案

解决方案1
 1  2014-07-22 09:55:29

Could you add "action cells" in every tr and simply show/hide those when hovering? 您可以在每个tr中添加“动作单元格”，然后在悬停时简单地显示/隐藏它们吗？

HTML : 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 : CSS ： 

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

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

解决方案2
 1  2014-07-22 12:38:31

I really expect this a solution! 我真的希望这是一个解决方案！ I've try it only in Chrome. 我只在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>

解决方案3
 0  2014-07-22 10:00:07

Try this and modify its to fit your needs. 试试看并修改它以适合您的需求。 

<!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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 叠加出现在Hover上 - 纯CSS - Overlay appear on Hover - Pure CSS 悬停时使用纯CSS3动画幻灯片标题 - Pure CSS3 animated slide-up caption on hover Pure CSS3 LavaLamp选项卡菜单中的问题悬停 - Issue in Pure CSS3 LavaLamp Tab menu Hover 在CSS3缓入过渡中的：hover上显示Div叠加 - Display Div Overlay on :hover with CSS3 Ease-In Transitions 带有jQuery和CSS3的方向感知悬停上的动画Div叠加 - Animated Div Overlay on Direction aware hover, with jQuery & CSS3 纯CSS悬停会导致文本出现颜色重叠 - Pure CSS hover resulting in a color-overlay with text 纯CSS3（3，2，1）倒计时 - Pure CSS3 (3, 2, 1) Countdown CSS3 模糊叠加 - CSS3 blur overlay 纯CSS覆盖滚动 - Pure CSS overlay scrolling 在Bootstrap数据表中使用纯CSS3隐藏表行 - Hide table rows using pure CSS3 in Bootstrap datatable
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM