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

Answer 3

尝试用引号包装您的网址

**stylesheet code**
#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 4

您是否确定您的CSS定位到实际图片URI？换句话说，如果您的CSS是HTML文档本身的一部分，那么您的图像应该位于相对于当前HTML文档的名为images的文件夹中。

但是，如果这个CSS是位于css文件夹中的外部样式表的一部分，则需要使用相对路径，该路径将升级到一级以访问图像。

css
    -> stylesheet.css
images
    -> collection.jpg

page.html

您的样式表应包含以下格式的background-image规则

background-image: url('../images/collection.jpg');

BTW，至少有两个原因，使用单独的图像来实现你想要实现的目标并不是一个好主意：

每个图片都是一个额外的浏览器请求 - 太多请求会使初始页面显示混乱
仅在请求时加载附加图像（当您将鼠标移到链接上时，单击它等），这将在实际加载请求的图像时产生难看的闪烁效果

因此，使用CSS sprites消除这两个问题。

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

4 个答案: