Question

Ive mvc应用程序包含4个属性的表，我使用了悬停表的功能显示一些按钮，当我将鼠标悬停在桌子上时，我会看到按钮，但所有的复选框都是移动位靠近name属性，有一种方法可以避免移动复选框当盘旋时

这是表格

<form autocomplete="off">
    @* Button for adding some user *@
    <div class="text-right">
        <a href="#" id="addRow"><i class="glyphicon glyphicon-plus"></i> new</a>
    </div>



    @* List of users *@
    <table class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.checkBox1)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.checkBox2)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.checkBox3)
                </th>
                <th></th>
            </tr>
        </thead>

        <tbody id="dataTable">
            <tr id="emptyRow" style="display: none;">
                <td>@Html.TextBox("name")</td>
                <td>@Html.CheckBox("checkBox1")</td>
                <td>@Html.CheckBox("checkBox2")</td>
                <td>@Html.CheckBox("checkBox3")</td>
                <td>
                    <span class="actions-default" style="display:none;">
                        @Html.ActionLink("Edit", "Edit", new { id = -1 }, new { @class = "btn-edit" }) |
                        @Html.ActionLink("Delete", "Delete", new { id = -1 }, new { @class = "btn-delete" })
                    </span>
                    <span class="actions-editable">
                        <input type="submit" value="Create" class="btn btn-default btn-create" />
                        <input type="submit" value="Cancel" class="btn btn-default btn-cancel" />
                    </span>
                </td>
            </tr>
            @foreach (var item in Model)
            {
                <tr data-id="@item.Id">
                    <td>
                        @Html.DisplayFor(modelItem => item.name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.checkBox1)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.checkBox2)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.checkBox3)
                    </td>
                    <td>
                        <span class="actions-default">
                            @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "btn-edit" }) |
                            @Html.ActionLink("Delete", "Delete", new { id = item.Id }, new { @class = "btn-delete" })
                        </span>
                        <span class="actions-editable" style="display:none;">
                            <input type="submit" value="Update" class="btn btn-default btn-update" />
                            <input type="submit" value="Cancel" class="btn btn-default btn-cancel" />
                        </span>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</form>

这是用于悬停表格的css代码

#dataTable .actions-default {
    display: none;
}

#dataTable:hover .actions-default {
    display: block;
}

Answer 1

设置显示内嵌块

<强> CSS

#dataTable .actions-default {
    display: inline-block;
}

#dataTable:hover .actions-default {
   /* Set color text, background color...whatever */
   color: red; /* example */
}

<强> DEMO HERE

Answer 2

这可能是因为当您显示按钮时，表格单元格会变宽，因此每隔一列都会调整其大小以匹配您的容器宽度。

尝试为列添加宽度

Answer 3

可能是因为span是一个内联元素，悬停样式应如下所示，以便更好地控制元素：

#dataTable:hover .actions-default {
    display: inline;
}

当鼠标悬停在表格上时，复选框会向左移动

3 个答案: