锚定标记在悬停和活动时更改图像

Question

我试图在悬停和活动时更改锚标记图像,但它无法正常工作.

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);
}

Answer 1

试试这个吧.它的工作:).只需为悬停图像添加src =,当鼠标输出时也添加src =.

<a href="#"><img src="blah.jpg" onMouseOver=src="blah-hover.jpg" onMouseOut=src="blah.jpg"></a>

Answer 2

标签是一个内联元素。您需要一个块元素。

#aCollection {
     display: block;
     width: 50px;
     height: 50px;
     background: url('../images/image.jpg') no-repeat top left;
}
#aCollection:hover {
     background-image: url('../images/image_hover.jpg');
}
#aCollection:active {
     background-image: url('../images/image_active.jpg');
}