css - 使用级联样式表的图像悬停

Question

我想使用 CSS 在悬停时交换图像...我不知道我做错了什么。

a.dropbox_banner_link:link {
        width: 520px; 
        height: 70px;
        background: url('/images/RESD/SendArtwork-Button-Full-Colour_sm.png'); 
}

a.dropbox_banner_link:visited {
         width: 520px; 
        height: 70px;
        background: url('/images/RESD/SendArtwork-Button-Full-Colour_sm.png') no-   repeat;   
}

a.dropbox_banner_link:hover {
        width: 520px; 
        height: 70px;
        background: url('/images/RESD/SendArtwork-Button-Grey_sm.png') no-repeat;  
}

a.dropbox_banner_link:active {
        width: 520px; 
        height: 70px;
        background: url('/images/RESD/SendArtwork-Button-Grey_sm.png') no-repeat; 
}

该网站是 www.signsinthemaking.com。并且图像文件夹位于根目录中。引用 CSS 是:

<a href=" ?page_id=" class="dropbox_banner_link"></a>

我以前让它工作，但在某个时候通过 CSS 保存了，请帮助。

Answer 1

我注意到你只是忘了让你的链接显示为 block :

.dropbox_banner_link {
    width: 520px;
    height: 70px;
    display: block;
    background: url('/images/RESD/SendArtwork-Button-Full-Colour_sm.png');
}

由于默认情况下它们是 inline，并且它们没有任何内容，因此它们被呈现为 0px/0px 元素。这就是您看不到它们的原因。