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。并且images文件夹位于根目录中。引用CSS是：

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

之前我有过工作，但在某些时候保存了CSS请帮助。

Answer 1

我注意到你忘了把你的链接显示为块：

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

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

Answer 2

在悬停时，您只需要更新要更改的值，因此在这种情况下，它将是具体的背景图像，默认情况下a也是内联元素。

有点像这样

<a class="sample_hover"></a>

.sample_hover {
    display: block;
    width: 250px;
    height: 250px;
    background-image: url("https://www.google.co.uk/images/srpr/logo11w.png");
}

.sample_hover:hover {
    background-image: url("https://www.google.co.uk/images/srpr/logo9w.png");
}

Answer 3

在您的情况下，您不需要为链接的每个状态声明样式。您只想在悬停时更改背景。因此，只有造型悬停状态才足够，因为其他一切都没有变化。

使用 背景图片 和 背景重复 属性更容易覆盖样式。

此外，需要像块元素一样声明元素（默认情况下，它是内联元素）。你可以在这里阅读：http://www.w3schools.com/html/html_blocks.asp

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

a.dropbox_banner_link:hover {
    background-image: url('/images/RESD/SendArtwork-Button-Grey_sm.png');  
}

图像悬停使用层叠样式表

3 个答案: