だから私はこのペンで遊んでてきたリンク

Question

の奇妙な振舞い：codepen.io/oknoblich/pen/ELfzd

を使用すると、このようなリンクを持つdiv要素をラップする場合：

<a href="#"> 
    <div> 
    <img src="link-to-image" /> 
    </div> 
</a> 

画像を取得しますサイズ変更されました。何故ですか？何か案は？私はあなたがCSSを変更していないと思います

Answer 1

上記のように、>ディレクティブは、指定された要素が直接の子であることを要求します（DOM階層内ではそれらの間に何もありません）。 <a href>を追加することにより、は、の間にあるので、.galleryの直下の子ではなくなりました。ライン13から>、31、38、42（又は、ライン31上で行われるように、.galleryとdiv間> a >を添加）を除去

は、問題を解決します。

Revised Pen

Answer 2

、

.gallery > div{ 
position: relative; 
float: left; 
padding: 5px; 
} 

.gallery > div > img { 
display: block; 
} 

.gallery > div:hover { 
    z-index: 1; 
} 

「>」この記号は、CSSを使用して、.galleryするためにCSSをtoedit必要があるので.gallery内に直接あるものだけdiv要素に適用されることを意味し> a> divなどとなります。