0

私は一連のli要素を使用して画像グリッドを作成しており、liの各画像にカーソルを合わせたときにホバー効果を追加する必要があります。設定した .grid li a img:hover の css opacity プロパティで正常に動作するようになりました。ただし、ここに背景画像を設定すると表示されません。ブラウザをロードしてインスペクタを使用すると、カーソルを合わせるとロードされた画像が表示されますが、視覚的には表示されません。z インデックスを高く設定してみましたが、うまくいきませんでした。

各画像には独自の異なるホバー状態があるため、より良い場合は、この他の方法を実行することにオープンです。

HTML:

<div class="container">
<ul class="grid">
   <li><a href="link.html"><img src="images/image1.jpg"></a></li>
   <li><a href="link.html"><img src="images/image2.jpg"></a></li>
   <li><a href="link.html"><img src="images/image3.jpg"></a></li>
</ul>
</div>

CSS:

ul.grid {
  list-style: none;
  margin: 20px auto 0;
  width: 798px;  
  }

.grid li {
  float: left;
  margin: 0px 4px 0px 0px;
  } 

.container {
  margin-left: auto;
  margin-right: auto;
  margin-top:50px;
  width: 513px;
  }

.grid li a img:hover {
  background: url(images/image1_hover.jpg) no-repeat;
  }

.grid li img {
  background-color: white;
  margin: 0;
  width: 262px;
  height: 200px;
  }

.grid li a {
  display: block;
  }
4

2 に答える 2

0

画像にカーソルを合わせたときに、jquery を使用して画像のソース タグを変更する方が簡単な場合があります。

于 2012-12-14T23:42:13.157 に答える
0

あなたが抱えていた問題は、リンゴとオレンジに関するものでした。オレンジ（背景）の上にリンゴ（IMG）タグがありました...背景の変更は機能していましたが、IMGはその上にありました-z-indexは役に立ちません。この状況では、背景画像のみを使用してください。下記参照。

編集済み：あなたもそれらをリンクにしたいと思っています。以下はあなたのために働くでしょう。

そうは言っても、この状況では 6 つの異なる画像を使用するのではなく、実際にはスプライトを使用します。また、以下の CSS は最適化される可能性が高く、LESS または SASS を使用することで確実に最適化されますが、金曜日はほぼ 4 で、会社のマイクロ タップが流れていました ;)

<html>
<head>
    <style type="text/css">
        ul.grid {
          list-style: none;
          margin: 20px auto 0;
          width: 798px;  
        }

        .grid li {
          float: left;
          margin: 0px 4px 0px 0px;
        } 

        .container {
          margin-left: auto;
          margin-right: auto;
          margin-top:50px;
          width: 513px;
        }

        .grid li a {
          background-color: white;
          margin: 0;
          width: 50px;
          height:50px;
        }

        .grid li a {
          display: block;
          }

        .img1 {
          background: url(images/image1.jpg) no-repeat;
        }

        .img1:hover {
          background: url(images/image1_hover.jpg) no-repeat;
        }

        .img2 {
          background: url(images/image2.jpg) no-repeat;
        }

        .img2:hover {
          background: url(images/image2_hover.jpg) no-repeat;
        }

        .img3 {
          background: url(images/image3.jpg) no-repeat;
        }

        .img3:hover {
          background: url(images/image3_hover.jpg) no-repeat;
        }
    </style>
</head>

<body>
    <div class="container">
    <ul class="grid">
       <li><a href="link.html" class="img1"></a></li>
       <li><a href="link.html" class="img2"></a></li>
       <li><a href="link.html" class="img3"></a></li>
    </ul>
    </div>
</body>
</html>
于 2012-12-14T23:37:49.173 に答える