2

我有一段非常简单的代码，应该可以在悬停时有效地交换图像。主img是灰色的，:hoverimg是绿色的。我可以看到绿色的:hoverimg 出现在悬停时，但它在主灰色的后面。我怎样才能使这项工作使灰色不可见: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;
}
4

3 回答 3

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;
}
于 2013-06-10T19:18:16.830 回答
0

那是因为类搞砸了.. 这是一个按钮的示例，它在文本中没有任何内容，但源是从 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;
}
于 2013-06-10T19:12:11.647 回答
0

您看到一个图像在另一个图像后面，因为您正在为内容中的图像设置背景图像。对于通过悬停在其上交换的图像，您应该在 CSS 中设置两个图像或在内容中设置两者（并使用 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 指定两个背景图像。

于 2013-06-10T19:31:26.907 回答