: мишень не работает на предыдущем элементе

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 и удалить общие селекторы одноуровневые.

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

<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>