图片悬停-HTML CSS

我在创建一个不同的图像时出现问题，当您将光标放在原始图像上时出现。继承人我的代码，而我列出按钮的其余部分：图片悬停-HTML CSS

<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 {显示：无}左浮动快速闪烁。

来源

2013-10-21 LostSchemer

遗憾的是没有这些工作=/ – LostSchemer

如果你想在:hover不同img，你可以通过与background-image的:after伪元素添加。

此方法适用于动态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; 
}

来源

2013-10-21 21:41:25

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

您正在更改<a>标签的背景，该标签恰好完全由<img>填充。因此，背景是有效的，因为img完全覆盖它。尝试放入一个

.home:hover img { display: none }

规则，以及当你被徘徊的时候隐藏img。这将允许背景“显示”。

来源

2013-10-21 21:34:24

你也将需要一个高度和宽度用此方法或标签将在没有任何内容，所以也不会出现。 – fredsbend

尝试添加以下行，徘徊在链接时，这将隐藏orriginal图像：

.home:hover img { 
    display: none; 
}

我想其他的图像被显示，但默认图像不会dissapear和仅仅是对前悬停图像。

现在，我还建议你到a元素的显示风格改变为block并给它一个固定的大小，像这样因为隐藏的图像元素时a元素会得到一个大小为0：

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

最后，我建议您在a元素中也将默认图像作为背景，以确保它与悬停图像完全相同。现在，您正在使用img元素来显示默认图像，这是显示悬停图像的另一个元素。我建议你防止这种情况，并尝试使用一个单一的元素。只需添加这条线来实现这一点：

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

希望这有助于！

来源

2013-10-21 21:34:35

使用的是：

.home:hover img { 
display: none; 
}

来源

2013-10-21 21:36:07

除了每个人在这里说，把它添加到CSS：

.home:hover img { display: none }

您还需要一个高度和宽度增加了一个标记，你正在放置一个背景，或者标签中没有内容，它根本不会显示。

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

来源

2013-10-21 21:39:41 fredsbend

图片悬停-HTML CSS

回答

相关问题