javascript - 在表行鼠标悬停时显示外部元素

Question

我使用 CSS 的 display:table 属性制作了一个 table。一切正常。

但是今天我公司有不同的要求，那就是:
一些按钮将显示 table row mouse over 并且其设计不会在任何表格单元格内。

我写了下面的代码。

<div class="table-responsive ni-deleteable">
    <div class="ni-table" ni-table-rowno="1">
        <div class="ni-table-header">
            <div class="ni-table-cell ni-deleteable ni-clickable ui-droppable">
                <div contenteditable="true">GMTtype</div>
            </div>
            <div class="ni-table-cell ni-deleteable ni-clickable ui-droppable">
                <div contenteditable="true">FabOpt</div>
            </div>
            <div class="ni-table-cell ni-deleteable ni-clickable ui-droppable">
                <div contenteditable="true">Sector</div>
            </div>
            <div class="ni-table-cell ni-deleteable ni-clickable ui-droppable">
                <div contenteditable="true">Wstg%</div>
            </div>
        </div>
        <div class="ni-table-row">
            <div class="ni-table-cell ni-clickable ui-droppable">
                <div contenteditable="true">
                    <br>
                </div>
            </div>
            <div class="ni-table-cell ni-clickable ui-droppable">
                <div contenteditable="true">
                    <br>
                </div>
            </div>
            <div class="ni-table-cell ni-clickable ui-droppable">
                <div contenteditable="true">
                    <br>
                </div>
            </div>
            <div class="ni-table-cell ni-clickable ui-droppable">
                <div contenteditable="true">
                    <br>
                </div>
            </div>
            <div class="placeholder-handle btn-group">
                <button class="handle-add btn btn-xs btn-success" type="button" value=""><i class="glyphicon glyphicon-plus"></i></button>
                <button class="handle-remove btn btn-xs btn-danger" type="button" value=""><i class="glyphicon glyphicon-remove"></i></button>
            </div>
        </div>
    </div>
</div>

CSS

.ni-table {
    display: table;
    min-width: 100%;
    margin-bottom: 0px;
    border-spacing: 0;
    background: #fff;
    margin: 0px;
    table-layout: fixed;
    border-collapse: collapse;
    width: 1px;
    height: 1px;
}

    .ni-table > .ni-table-header, .ni-table > .ni-table-row, .ni-table > .ni-table-footer {
        display: table-row;
        min-height: 22px;
    }

        .ni-table > .ni-table-header > .ni-table-cell, .ni-table > .ni-table-row > .ni-table-cell, .ni-table > .ni-table-footer > .ni-table-cell {
            display: table-cell;
            /*border: 1px solid #bdbdbd;*/
            border-bottom: none;
            border-right: none;
            padding: 0px;
            height: 22px;
            vertical-align: middle;
            /*text-align: center;*/
            overflow: hidden;
        }

            .ni-table > .ni-table-header > .ni-table-cell, .ni-table > .ni-table-row > .ni-table-cell, .ni-table > .ni-table-footer > .ni-table-cell:first-child {
                border-bottom: 1px solid #bdbdbd;
            }
        /*.ni-table > .ni-table-header > .ni-table-cell, .ni-table > .ni-table-row > .ni-table-cell, .ni-table > .ni-table-footer > .ni-table-cell:last-child {
                border-bottom: none;
            }*/
        .ni-table > .ni-table-header .ni-table-cell:last-child, .ni-table > .ni-table-row .ni-table-cell:last-child, .ni-table > .ni-table-footer .ni-table-cell:last-child {
            border-right: 1px solid #e0e0e0;
        }

    .ni-table > .ni-table-header {
        background: rgb(224, 224, 224);
        /* Old browsers */
        background: -moz-linear-gradient(top, rgba(224, 224, 224, 1) 0%, rgba(189, 189, 189, 1) 50%, rgba(224, 224, 224, 1) 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(224, 224, 224, 1)), color-stop(50%, rgba(189, 189, 189, 1)), color-stop(100%, rgba(224, 224, 224, 1)));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(224, 224, 224, 1) 0%, rgba(189, 189, 189, 1) 50%, rgba(224, 224, 224, 1) 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(224, 224, 224, 1) 0%, rgba(189, 189, 189, 1) 50%, rgba(224, 224, 224, 1) 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(224, 224, 224, 1) 0%, rgba(189, 189, 189, 1) 50%, rgba(224, 224, 224, 1) 100%);
        /* IE10+ */
        background: linear-gradient(to bottom, rgba(224, 224, 224, 1) 0%, rgba(189, 189, 189, 1) 50%, rgba(224, 224, 224, 1) 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#e0e0e0', GradientType=0);
        /* IE6-9 */
        text-align: left;
    }

        .ni-table > .ni-table-header > .ni-table-cell {
            color: #000;
            min-height: 22px;
            font-size: 12px;
            /*margin: 0px 3px;*/
            border-right: 1px solid #e0e0e0;
            overflow: hidden;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            position: relative;
        }
        .ni-table > .ni-table-header > .ni-table-cell div{
            margin: 0px 3px;
            overflow: hidden;
            text-align: center;
            font-weight: normal;
        }

            .ni-table > .ni-table-header > .ni-table-cell span {
                width: 100%;
                text-align: center;
                float: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                height: 22px;
                line-height: 22px;
            }
    .ni-table > .ni-table-cell label {
        margin: 0 3px;
    }
    .ni-table > .ni-table-cell input[type=text] {
        margin: 0 -3px;
    }
    .ni-table > .ni-table-row > .ni-table-cell {
        color: #000;
        min-height: 22px;
        font-size: 12px;
        /*padding: 0px 3px;*/
        border-right: 1px solid #e0e0e0;
        overflow: hidden;
        text-align: left;
        /* text-overflow: ellipsis; */
        white-space: nowrap;
        position: relative;
        box-sizing: border-box;
        /* display: block; */
    }

        .ni-table > .ni-table-row > .ni-table-cell > div {
            overflow: hidden;
        }



    /*.ni-table > .ni-table-row:nth-child(odd) > .ni-table-cell {
    background-color: #f5f5f5;
}

.ni-table > .ni-table-row:nth-child(odd) > .ni-table-cell {
    background-color: #f5f5f5;
}*/

    .ni-table > .ni-table-row:hover > .ni-table-cell {
        background-color: #d7d7d7;
    }

    .ni-table > .ni-table-footer {
        font-weight: bold;
        text-align: center;
    }

具有类名 placeholder-handle 的 div 包含将在 上显示 mouseover 的那些 buttons >ni-表行。

The problem is: The placeholder-handle is occupying the space. But my need is: it will show only on mouseover. Any idea will help me a lot.

Answer 1

你可以这样做:

 .ni-table-row .placeholder-handle button {
       display: none;  // hide when no state
 }
 .ni-table-row:hover .placeholder-handle button {
       display: inline-block;  // show when hover
 }

编辑

所以我在你的代码中看到的最好的方法是在最后一个表格单元格中插入按钮并使用绝对定位来解决问题:

<div class="ni-table-cell ni-clickable ui-droppable">
    <div contenteditable="true">
        <br>
    </div>

    <div class="placeholder-handle btn-group">
        <button class="handle-add btn btn-xs btn-success" type="button" value=""><i class="glyphicon glyphicon-plus"></i></button>
        <button class="handle-remove btn btn-xs btn-danger" type="button" value=""><i class="glyphicon glyphicon-remove"></i></button>
    </div>
</div>

CSS

 .ni-table-row {
       position:relative;
  }
 .ni-table-row .placeholder-handle {
       display: none;  /* hide when no state */
       position: absolute;
       width: 100px; /* adjust here that you need */
       right: -100px; /* adjust (width * -1) */
 }
 .ni-table-row:hover .placeholder-handle {
       display:  block;  /* show when hover */
 }