1

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

<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');
}
4

1 回答 1

0

我想您是在问如何仅使用一张图像来实现这一点。所以这是解决方案。

这是用作背景的图像。

在此处输入图像描述

这是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>
于 2013-03-28T01:47:35.293 回答