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

when hover over the table the checkBoxes move to left

本文关键字：复选框 左移 移动 悬停 鼠标 表格      更新时间：2023-09-26

我的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;
}

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

尝试给你的列一个宽度

这可能是因为span是一个内联元素，悬停样式应该看起来像这样，以更好地控制元素:

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

Set display inline-block

CSS 

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

演示

相关文章：