使用图像作为链接悬停图像

我使用两个图像，以便当您将鼠标悬停在图像上时，它会从带有黑色文本的图像更改为带有红色文本的图像，但此部分可以正常工作，但我有两个图像图像的实例而不是一个 - 都从黑色变为红色，但这只应该在页面上显示一次。任何人都可以请建议如何解决这个问题？使用图像作为链接悬停图像

<a href="mailto:[email protected]?Subject=contact" class="email" title="email me"> 

.email { 
margin-bottom: 10px; 
width: 730px; 
height:60px; 
display:block; 
background: transparent url('images/email.png'); 
background-position: center; 
background-repeat: no-repeat; 
} 
.email:hover { 
background-image: url('images/email_hover.png'); 
}

来源

2013-03-27 Antonia Evans

你是什么意思的图像的两个实例？你的意思是你想只有一个图像文件？ – 2013-03-27 23:45:57

我想你是问如何使用只有一个图像来实现这一点。所以这里是解决方案。

这是用作背景的图像。

enter image description here

这是HTML页面。

<html> 
<head> 
<style type="text/css"> 
.email {  
    width: 280px; 
    height:30px; 
    display:block; 
    background:url('bg.png') no-repeat; 
    /*extra styles */ 
    padding:10px; 
    font-size:25px; 
    text-decoration:none; 
    color:#fff; 
    text-align:center; 
} 
.email:hover { 
    background-position:0px -50px; 
} 
} 
</style> 
</head> 
<body> 
    <a href="mailto:[email protected]?Subject=contact" class="email" title="email me">Email Me</a> 
</body> 
</html>

来源

2013-03-28 01:47:35

使用图像作为链接悬停图像

回答

相关问题