Question

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

<a href="mailto:admin@email.co.uk?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');
}

Answer 1

我想你问的是如何只用一张图片来实现它。所以这是解决方案。

这是用作背景的图片。

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:admin@mail.co.uk?Subject=contact" class="email" title="email me">Email Me</a>
</body>
</html>

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

1 个答案: