Question

我有两张图片

<div class = "main-container">
        <div  class="img" id = "one">
            <a href="#one"><img src="1.jpg" ></a>
        </div>

        <div class="img" id = "two">
            <a href="#two"><img src="2.jpg"></a>
        </div>
</div>

当我点击第一张图像时，第二张图像应该旋转并且它正在工作，但是当第二张图像被点击时，第一张图像不会旋转，但它会出现在它的初始位置。只使用了css：

#one:target ~ #two{
    transform: perspective( 600px ) rotateY( -355deg );
}
#two:target ~ #one{
    transform: perspective( 600px ) rotateY( -355deg );
}

Answer 1

General sibling selector：

〜组合器分离两个选择器并匹配第二个选择器元素只有在前面有第一个时，才会共享一个公共元素父节点。

#two前面有#one，这将有效：

#one:target ~ #two {}

#one前面没有#two，这将不工作：

#two:target ~ #one {}

只需在锚点href属性中反转片段标识符值，然后删除常规兄弟选择器。

＆＃13;

#one:target {
  transform: perspective(600px) rotateY(-355deg);
}
#two:target {
  transform: perspective(600px) rotateY(-355deg);
}

＆＃13;

<div class="main-container">
  <div class="img" id="one">
    <a href="#two">
      <img src="http://placehold.it/50x50">
    </a>
  </div>

  <div class="img" id="two">
    <a href="#one">
      <img src="http://placehold.it/50x50">
    </a>
  </div>
</div>

＆＃13;

：target不能处理前一个元素

1 个答案: