1

CSS で :hover メソッドを使用するときの適切な方法について混乱しています。この例では、ホバーすると別の写真に変わる写真があります。私が理解しているように、どちらかを達成する方法は不明ですが、2つのオプションがあり、どちらが最適です。

オプション1：

HTML に 2 つの画像があります。この例では、それらをまったく同じ場所に配置してから、ホバー時に非表示にする必要がありますか?

http://jsfiddle.net/C5bKZ/4/

オプション 2:

HTML に単一の空の div を作成し、CSS を使用して背景画像を追加し、ホバー時に新しい背景画像を浮かせます。

http://jsfiddle.net/C5bKZ/9/

4

4 に答える 4

3

これを実現するには、さまざまな方法があります。

  1. 背景のスライド: 背景として 1 つの画像 (2 つの画像が並んでいる) を使用し、親要素がホバーされたときに単純に再配置できます。

  2. 2 つの画像を絶対に重ねて配置し、マウスを重ねると上の画像を非表示にして、2 番目の画像を表示します。

  3. 親に両方の画像を並べて配置し、overflow を hitten に設定します (2 番目の画像を非表示にするため)。ユーザーが親の上にマウスを置くと、最初の親が非表示になり、2 番目の親が表示されます。

投稿した最初の例では、次の CSS を追加できます。

.image {
    width:    180px;
    height:   270px;
    overflow: hidden;
}

.image:hover :first-child {
    display:  none;
}

フィドル: http://jsfiddle.net/jonathansampson/C5bKZ/10/

于 2012-06-08T14:59:57.347 に答える
2

あなたのオプションはどちらも実行可能ですが、最適なパフォーマンスの観点から、可能であればこれを行います:

  1. 両方の画像を含む 1 つの画像を重ねて作成します。
  2. 1 つの画像のサイズのみを持つコンテナー要素を使用します。(つまり、この新しい画像の半分の高さ)
  3. 次に、:hover変更時にbackground-position

この手法はスプライト/スプライトと呼ばれます。

利点は次のとおりです。

  • あなたは1つのイメージしか持っていません
  • ブラウザは 1 つの http リクエストのみを行う必要があります
  • マウスオーバーと次の画像の読み込みの間に遅延はありません。
于 2012-06-08T14:59:22.357 に答える
0

オプション 1 を実装する簡単な方法は次のようになります。

<a href="#" class="myLink"><img src="img1.jpg" class="img_on" /><img src="img2.jpg" class="img_off" /></a>

css は次のようになります。

.img_off, .myLink:hover .img_on{display:none;}
.myLink:hover .img_off{display:block;}

2 番目のオプションの問題は、画像が読み込まれていないため、最初のホバー時に常に小さなちらつきが発生することです。

また、最初のオプションの方が維持しやすいこともわかりました。

于 2012-06-08T15:00:20.073 に答える
0

最初に非表示のアイテムのクラスを使用して、次のようなホバー セレクターを追加することで、もう少し管理しやすくすることができます。

HTML

<div class="image">
    <img src="http://teamcoding.ca/leisure/wp-content/uploads/2012/06/373036_320675657996371_1880708219_n.jpeg"   id="image1"/>
    <img class="hover" src="http://teamcoding.ca/leisure/wp-content/uploads/2012/06/373040_295769990493061_127804360_n.jpeg"/>
</div>

CSS 

.image { display: inline; }
.image img.hover { display:none; }
.image:hover img { display:none; }
.image:hover img.hover { display:inline; }
​

http://jsfiddle.net/hunter/ZHNDU/

于 2012-06-08T15:00:22.307 に答える