图像悬停-HTML CSS答案

【问题标题】：Image Hover-HTML CSS图像悬停-HTML CSS
【发布时间】：2013-10-30 13:42:30
【问题描述】：

当您将光标放在原始图像上时，我无法创建不同的图像。这是我的代码，没有我列出的其余按钮：

<nav class="buttons">
<ul>
    <li class="left">
    <a class="home" href="www.google.com">
    <img src="img/Home_2.png"></a></li>
</ul>
</nav>

CSS：

.buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;}
.buttons ul{list-style-type: none; margin:0px; padding:0px}

.left{float:left}
.home:hover {background: url(../img/Home_crack.PNG)}

有什么建议吗？

编辑：好的建议很好，但是当我将鼠标悬停在“主页按钮”上时，浮动中的东西会消失。这是具有完整浮点属性的代码：

HTML：

<nav class="buttons">
<ul>
    <li class="left">
    <a class="home" href="www.google.com">
    <img src="img/Home_2.png"></a></li>

    <li class="left">
    <a href="www.google.com" class="menu">
    <img src="img/Menu_2.png"></a></li>

    <li class="right">
    <a href="www.google.com" class="about">
    <img src="img/About_2.png"></a></li>

    <li class="right">
    <a href="www.google.com" class="contact">
    <img src="img/Contact_2.png"></a></li>
</ul>
</nav>

CSS：

.buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;}
.buttons ul{list-style-type: none; margin:0px; padding:0px}

.left{float:left}
.home:hover img{display:none} 
.home:hover {background: url(../img/Home_crack.PNG);}

.right{float:right}

基本上我想分开 4 个按钮....一个在左浮动，一个在右浮动，然后在悬停时，按钮会变成不同的图像....使用新的 img{display: none} 左浮动快速闪烁。

【问题讨论】：

不幸的是，这些都不起作用=/

标签： html css image background hover

【解决方案1】：

如果您想在:hover 上使用不同的img，可以通过:after 伪元素和background-image 添加它。

这种方法适用于动态img 维度。

jsFiddle here - 不同的img 将显示在a 的:hover 上。

a:hover:after {
    content: "\A";
    position: absolute;
    z-index: 99;
    width: 100%;
    height: 100%;
    background: url('http://...');
    top: 0px;
    left: 0px;
}

【讨论】：

有趣的方法来做到这一点。我更喜欢这个。 +1

【解决方案2】：

您正在更改<a> 标记的背景，该标记恰好完全被<img> 填充。因此，背景实际上是不可见的，因为 img 完全覆盖了它。尝试放一个

.home:hover img { display: none }

规则以及当您悬停时隐藏img。这将允许背景“显示”。

【讨论】：

您还需要使用此方法的高度和宽度，否则 a 标签中将没有内容，因此它也不会出现。

【解决方案3】：

尝试添加以下行，这将在悬停链接时隐藏原始图像：

.home:hover img {
    display: none;
}

我认为正在显示另一张图片，但默认图片不会消失，只是在悬停图片之前。

现在，我还建议您将 a 元素的显示样式更改为 block 并给它一个固定大小，因为 a 元素在隐藏图像元素时将获得 0 的大小：

.home {
    display: block;
    width: 100px;
    height: 100px;
}

最后，我建议您在a 元素中也使用默认图像作为背景，以确保它与悬停图像完全相同。现在您使用img 元素来显示默认图像，使用不同的元素来显示悬停图像。我建议您防止这种情况发生，并尝试使用一个元素。只需添加这一行即可实现：

.home:hover {
    background: url(../img/Home_2.png)
}

希望这会有所帮助！

【讨论】：

【解决方案4】：

除了这里的其他人都说要添加到 css 中：

.home:hover img { display: none }

您还需要为要放置背景的 a 标签添加高度和宽度，否则标签中将没有内容并且根本不会显示。

.home:hover {
   background: url(../img/Home_crack.PNG)
   width: [enter the width of the bg image];
   height: [enter the height of the bg image];
}

【讨论】：