html - anchor 标签在悬停和事件时更改图像

Question

我正在尝试更改悬停和事件时的 anchor 标记图像，但它不起作用。

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>