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

Answer 2

那是因为这些类搞砸了..这里是一个按钮的例子，它在文本中没有任何东西，但源是从css设置的//它也给出了来自css的悬停效果：

.SubmitClass
{
    background-image: url('../Images/Submit.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    border: none;
    width: 100px;
    height: 30px;
    cursor: pointer;
    cursor: hand;
}

.SubmitClass:hover
{
    background-image: url('../Images/SubmitHover.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    border: none;
    width: 100px;
    height: 30px;
    cursor: pointer;
    cursor: hand;
}

Answer 3

您在另一张图片后面看到一张图片，因为您正在为内容中的图片设置背景图片。对于通过将鼠标悬停在其上进行换出的图像，您应该在CSS中设置BOTH图像，或者在内容中设置两者（并使用JavaScript / JQuery处理交换）。

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

在上面的html中，您将图像设置为内容。

您可能不希望/不想使用PHP动态输出CSS，因此您更有可能输出两个图像并切换其可见性

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

并使用以下JQuery切换图像

$(document).on({
   mouseenter: function() {
       $('.hoverImage').show();
       $('.defaultImage').hide();
   },
   mouseleave: function() {
       $('.hoverImage').hide();
       $('.defaultImage').show();
   } 
}, 'a.logo');

或者，根据Nathans的回答，使用CSS指定两个背景图像。

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

3 个答案: