3

私はWeb開発の初心者ですが、2つの画像を「入れ替える」ことについて質問があります。

このCSSとマークアップを作成しましたが、何らかの理由で機能していないようです。最初の画像にカーソルを合わせるとスワップインするはずの2番目の画像は、ページの最初の画像の上にあります。

CSS：

.home  {
  margin: 0;
  padding: 0;
  background: url('images/onhome.png') no-repeat;
}

.home a, .nav a:link, .nav a:visited {
  display: block;
  width: 90px;
  height: 25px;
}

.home a:hover img {
  visibility: hidden;
}

HTML：

<div class="home">
  <a href="#">
    <img src="style/images/home.png" width="65" height="18" alt="" />
  </a>
</div>

何が悪いのかわかりません。誰かが私を助けてくれたらとてもありがたいです。これを行うための別のより良い方法があれば、私も間違いなくそれを受け入れます。

4

1 に答える 1

13

これを行う1つの方法は、を忘れて、背景画像のURL<img>を変更することです。:hover

#home {
    background: url(http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/grey-wolf_565_600x450.jpg) no-repeat;
    height: 600px;
    width: 600px;
}

#home:hover {
    background: url(http://25.media.tumblr.com/tumblr_m6fmnhxL3B1r7wu2mo1_500.jpg)  no-repeat;
}

実例： http： //jsfiddle.net/c9sRa/

オオカミの上にカーソルを置くと、トラの子の絵に変わります:-)

于 2013-03-18T00:39:47.023 に答える