1

2 つの画像を使用しているので、画像にカーソルを合わせると、黒いテキストの画像から赤いテキストの画像に変わります。この部分は正常に機能しますが、画像のインスタンスが 1 つではなく 2 つあり、両方とも黒から赤に変更されますが、これはページに 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

1つの画像のみを使用してこれを実装する方法を尋ねていると思います。だからここに解決策があります。

背景に使用した画像です。

ここに画像の説明を入力

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 に答える