CSS：子セレクタ付きホバーイメージスイッチ

Question

子セレクタを使用してホバー上の画像を切り替えるのにCSSだけを使用しています。各画像は、包含div内にインラインブロックとして表示され、画像のグリッドを作成します。

これは奇妙twitch-

を除いて、美しく働いている）マウスを含むDIVで最初画像上に置きました。 および b。）ページが任意の距離をスクロールすると、ページ全体が先頭にジャンプします。

このツイッチは、最初の画像上にマウスを移動することによって誘発されます。位置に関係なく、マウスが他の画像の間を移動するときは発生しません。

効果がここに表示されます：https://jsfiddle.net/continuist/kognrzof/9/

CSS：

/* CONTAINER DIV */ 

    #rocks {width: auto;} 

/* EACH IMAGE ELEMENT */ 

    .foo img {width:30%;} 

    .foo img:first-child{display:inline-block;} 
    .foo img:last-child{display:none;} 

    .foo:hover img:first-child{display:none;} 
    .foo:hover img:last-child{display:inline-block;} 

HTML：写真で

<div id="rocks"> 
    <a class="foo" href="#"> 
     <img src="/img/item1.png"> 
     <img src="/img/item1hover2.svg"> 
    </a> 
    <a class="foo" href="#"> 
     <img src="/img/item1.png"> 
     <img src="/img/item1hover.svg"> 
    </a> 
    <a class="foo" href="#"> 
     <img src="/img/item3.png"> 
     <img src="/img/item3hover.svg"> 
    </a> 

    ... 

</div> 

、これらのイメージのスイッチのそれぞれについて：ホバー。しかし、ページがスクロールし、マウスがページ上の最初のイメージ（一番上、一番左）上に移動すると、ページ全体が先頭にジャンプします。

Answer 1

最初に、私はそれがあなたのブラウザの問題だと思っていました。なぜなら、Firefoxでは動作が正しいからです。しかし、OperaやChromeでは、あなたが記述したほど悪いものでした。

私はフィドルを作成しましたが、これはうまくいくようですが、コードを少しきれいに再作成しました。

主な変更点は、ホバリングとサイズの影響を処理するために、与えられたクラスでIMGをdivにカプセル化したことです。次に、画像はdivの幅の100％にすぎません（オーバーフローでIMG要素を配置するのではなく、カバーを使用するためにdivの背景として画像を持たせたいかもしれません。 ：divに隠されています

また、マージン：5pxと幅/高さ：calc（33vw - 15px）のA（.foo）フロートを作成しました。メディアは

/* CONTAINER DIV */ 
 

 
    #rocks {width: auto;} 
 
    
 
/* EACH IMAGE ELEMENT */ 
 

 
    .foo {width:calc(33vw - 15px); height:calc(33vw - 15px); position:relative; margin:5px 5px 0 0 ; float:left; } 
 
    .foo div img{width:100%;} 
 
    
 
    .nd{display:none;} 
 
    
 
    .foo:hover div.st{display:none;} 
 
    .foo:hover div.nd{display:block;}

<div id="rocks"> 
 
<!-- ROW 1 --> 
 
    <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> 
 
    <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> 
 
<!-- ROW 2 --> 
 
    <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> 
 
<!-- ROW 3 --> 
 
    <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> <a class="foo" href="#"> 
 
    <div class="switch st"> <img src="https://dl.dropbox.com/s/nduc0f6fi6zmt5g/rock1.png?dl=0"></div> 
 
     <div class="switch nd"><img src="https://dl.dropbox.com/s/jce22cboubyv3l8/rock1-hover.png?dl=0"></div> 
 
    </a> 
 
</div>

を照会します（その後、handeledすることができています

Answer 2

私はこの行動の理由を説明することはできないんだけど、私は私があなたの問題の解決策を知っていると思います。

各#rocks a要素にdisplay: inline-blockを追加すると解決できます。 この変更により、画像に適用されているwidthをアンカータグに切り替える必要があります。私はあなたのフィドルをフォークし、あなたはそれを見ることができますhere

私はそれがあなたを助けてくれることを願っています。