Изображение изменения тега привязки при наведении и активном

Я пытаюсь изменить изображение тега привязки при наведении и активен, но не работает.

HTML:

<div>
    <div id="accordion">
        <h3><a href="" runat="server" id="aCollection">test</a></h3>
        <div class="acsection" runat="server" id="divCollection">
            <ul>
                <li runat="server" id="collectionmenu1"><a href="1.aspx">page-1</a></li>
                <li runat="server" id="collectionmenu2"><a href="2.aspx">page-2</a></li>
                <li runat="server" id="collectionmenu3"><a href="3.aspx">page-3</a></li>
                <li runat="server" id="collectionmenu4"><a href="4.aspx">page-4</a></li>
            </ul>
        </div>
    </div>
    <h3><a href="5.aspx">Group</a></h3>
    <h3><a href="6.aspx">Send</a></h3>
    <h3><a href="7.aspx">contact</a></h3>
</div>

CSS:

#aCollection
{
    background-image: url(images/collection.jpg);
}

#aCollection:hover
{
    background-image: url(images/collection_hover.jpg);
}

#aCollection:active
{
    background-image: url(images/collection_active.jpg);
}