CSS可见性：隐藏被延迟

Question

I have a table with data and buttons on the right. I only want the buttons to show up, when i hover over the row. I'm trying to implement it only with CSS and it already kinda works, but when the cursor leaves the row of the table, the button still stays for a few seconds. I found the solution to use transition: ease-in-out 2s linear; but then my buttons background transition on hover doesn't work anymore.

CSS

.button {
    display: inline-block;
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 5px;
    text-align: center;
    transition: 0.3s;
}

.button:hover {
    text-decoration: none;
}

.button-secondary {
    color: #999;
    background-color: #00000000;
    border: 1px solid #999;
}

.button-secondary:hover {
    color: #000;
    background-color: #0053ff16;
    border-color: #000;
}

.button-danger {
    color: #fff;
    background-color: #e01e37;
    border: 1px solid #c71f37;
}

.button-danger:hover {
    color: #fff;
    background-color: #c71f37;
}

.invisiblebutton-container .button {
    visibility: hidden;
}

.invisiblebutton-container:hover {
    background-color: #f3f3f3;
}

.invisiblebutton-container:hover .button {
    visibility: visible;
}

CSHTML

@foreach (var item in Model) {
        <tr class="invisiblebutton-container">
            <td class="col-sm-5">
                @Html.DisplayFor(modelItem => item.Username)
            </td>
            <td class="col-sm-5">
                @Html.DisplayFor(modelItem => item.Email)
            </td>
            <td class="col-sm-2">
                <a asp-action="Details" asp-route-id="@item.Id" class="button button-secondary">Details</a>
                <a asp-action="Delete" asp-route-id="@item.Id" class="button button-danger">Delete</a>
            </td>
        </tr>
}

Answer 1

You can try to set transition to 0.05s,so that buttons background transition on hover will still work,and when the cursor leaves the row of the table, the button will only stay 0.05s:

.button {
    display: inline-block;
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 5px;
    text-align: center;
    transition: 0.05s;
}

.button:hover {
    text-decoration: none;
}

.button-secondary {
    color: #999;
    background-color: #00000000;
    border: 1px solid #999;
}

.button-secondary:hover {
    color: #000;
    background-color: #0053ff16;
    border-color: #000;
}

.button-danger {
    color: #fff;
    background-color: #e01e37;
    border: 1px solid #c71f37;
}

.button-danger:hover {
    color: #fff;
    background-color: #c71f37;
}

.invisiblebutton-container .button {
    visibility: hidden;
}

.invisiblebutton-container:hover {
    background-color: #f3f3f3;
}

.invisiblebutton-container:hover .button {
    visibility: visible;
}