Question

所以我一直在玩这支笔：codepen.io/oknoblich/pen/ELfzd

如果你用这样的链接包装一个div：

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

图片调整大小。这是为什么？有什么想法吗？

Answer 1

我认为你没有改变CSS，

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

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

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

“＆gt;” 中这个标志意味着CSS只适用于那些直接位于.gallery内的div，所以你需要将css改为.gallery＆gt; a＆gt; div等等。

Answer 2

正如上面提到的pratikloda，>指令要求指定的元素是直接子元素（在DOM层次结构中它们之间没有任何内容）。通过添加<a href>，<div>不再是.gallery的直接子项，因为<a>位于它们之间。

从第13,31,38,42行移除>（或者在> a >和.gallery之间添加div，如第31行所示），解决问题。

Revised Pen

奇怪的链接表现

2 个答案: