стиль CSS остается после клика

Question

У меня есть простая тестовая страница с единственной стилизованной кнопкой.Я использую: hover, когда вы наводите курсор на кнопку.Однако, когда вы нажимаете кнопку, стиль a: hover остается, пока я не нажму на что-то еще.Как бы я это исправить и почему это происходит?

Спасибо, род.

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

    <% using (Ajax.BeginForm(new AjaxOptions { }))
       { %>
    <div id="detailActions">
        <a href="#">Delete User</a>
    </div>
    <% } %>
</asp:Content>

Мой CSS:

#detailActions
{
    margin-bottom: 7px;
    padding: 3px 0px 5px 0px;
}
#detailActions
{
    padding: 1px 7px 1px 7px;
    margin: 0px 5px 0px 0px;
    border: solid 1px gray;
    background-color: #ADD8E6;
    cursor: pointer;
    width: auto !important;
    font-weight: bold;
    text-decoration: none;
    color: #003366;
    font-size: 1.2em;
}

#detailActions a:hover, #detailActions a:active, #detailActions a:focus
{
    color: White;
    background-color: #00008B;
}

Answer 1

Это a:focus, что делает его похожим на правило a:hover.a:focus соответствует любой ссылке, которая сфокусирована.Когда вы нажимаете на ссылку, она становится сфокусированной.

Удалите правило a:focus, и все будет хорошо.