html - 悬停时的 css 交换图像无法正常工作 - 悬停图像显示在主图像后面

Question

我有一段非常简单的代码，可以在悬停时有效地交换图像。主 img 是灰色的，:hover img 是绿色的。我可以看到绿色 :hover img 出现在悬停时，但它位于主要的灰色图像后面。我怎样才能使这项工作使灰色在 :hover 上不可见？

html

<div id="header">
    <a class="logo" href="#"><img src="<?php bloginfo('template_url');?>/img/logo.png" alt="logo" /></a>
</div>

CSS

#header {
    height: 40px;
    padding-bottom: 40px;
    padding-top: 80px;
    vertical-align: middle;
    width: 960px;
}

#header .logo {
    display: block;
    float: left;
    width: 185px;
}

#header .logo:hover {
    background: url('img/logo_hover.png') no-repeat;
}

Answer 1

修改后的 CSS:

#header {
    height: 40px;
    padding-bottom: 40px;
    padding-top: 80px;
    vertical-align: middle;
    width: 960px;
}

#header .logo {
    display: block;
    float: left;
    width: 185px;
    height: 40px; /*added*/
}

#header .logo:hover {
    background: url('img/logo_hover.png') no-repeat;
}

/*added*/
#header .logo img {
    display: block;
}

#header .logo:hover img {
    display: none;
}