Question

我试图以装饰的方式放置一些图像，但是，我似乎无法让代码在CSS方面正常工作。我很确定我在选择器上做错了什么，并且想知道是否有人愿意看一下它。

当我添加＆lt; a＆gt;时，代码似乎中断了。标签，但我真的想包括图像的链接。

使用＆lt; a＆gt;断开代码标记：JSFiddle

没有＆lt; a＆gt;的工作代码供参考：JSFiddle

我希望我可以通过＆lt; a＆gt;获得一个。标签工作。

.photos img {
  position: absolute;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  padding: 10px 10px 30px 10px;
  background: white;
  border: solid 1px black;
}

.photos img:nth-of-type(1) {
  left: 50px;
  top: 50px;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
}

.photos img:nth-of-type(2) {
  left: 150px;
  top: 100px;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

.photos img:nth-of-type(3) {
  left: 250px;
  top: 50px;
  -webkit-transform: rotate(7deg);
  -moz-transform: rotate(7deg);
  -o-transform: rotate(7deg);
  transform: rotate(7deg);
}

.photos img:nth-of-type(4) {
  left: 350px;
  top: 150px;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.photos img:nth-of-type(5) {
  left: 450px;
  top: 50px;
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}

.photos img:hover {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  z-index: 10;
  -webkit-transform: rotate(380deg) scale(1.5);
  -moz-transform: rotate(380deg) scale(1.5);
  -o-transform: rotate(380deg) scale(1.5);
  transform: rotate(380deg) scale(1.5);
  z-index: 10;
}

<div class="photos"> 
    <a href="https://www.google.com/" target="_blank"><img src="https://lorempixel.com/160/220"/></a>
    <a href="https://www.google.com/" target="_blank"><img src="https://lorempixel.com/160/220"/></a>
    <a href="https://www.google.com/" target="_blank"><img src="https://lorempixel.com/160/220"/></a>
    <a href="https://www.google.com/" target="_blank"><img src="https://lorempixel.com/160/220"/></a>
    <a href="https://www.google.com/" target="_blank"><img src="https://lorempixel.com/160/220"/></a>
</div>

Answer 1

您正在使用nth-of-type(1)来放置图片，但因为它们现在是锚标记的子项，所以它们都是第一个孩子。因此，它们将被放置在同一位置并获得.photos img:nth-of-type(1) CSS。

尝试这样做：

.photos a:nth-of-type(1) img {
    left: 50px;
    top: 50px;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
}

完整结果： https://jsfiddle.net/kLnn2jLu/4/

使用锚标记后样式中断

1 个答案: