Как добиться эффекта / действия на разных контейнерах div, используя одну и ту же метку? - PullRequest
Новая
       17

Как добиться эффекта / действия на разных контейнерах div, используя одну и ту же метку?

0 голосов
/ 30 января 2020

Итак. то, что я пытаюсь сделать, - это добиться нескольких эффектов на контейнере для карт, когда переключается с помощью флажка. Мне нужно решение в чистом css, где я могу сделать эффект тени коробки, появляющийся на карте, когда я выбираю его. И я также вставил пользовательский объект-флажок, чтобы он выглядел круглым с помощью div ... и в то же время он должен быть отмечен галочкой.

До сих пор мне удавалось разместить несколько ярлыков для достижения обоих этих целей отдельно, но я не могу объединить их в один клик. Навигация с #id: флажок + div> метка .. не подходит для меня.

Я могу быть очень плох в своем подходе, имея несколько меток и блоков, но, пожалуйста, поправьте меня, если я смогу найти лучший подход. Мой план состоит в том, чтобы в основном скрыть родительский флажок ввода, который обрабатывает карту, а затем поставить внутри него круглый флажок.

https://jsfiddle.net/mjsushanth/2r436g7a/5/ 

//random snippet sorry if it doesnt make sense

<div class="flex-container">

      <div class="flex-0"></div>


      <label for="tag1"> </label>
      <input type="checkbox" name="emotion1" id="tag1" class="hidden1" />

      <div class="cc1 card flex-two class1">
        <label for="tag1">

          <div class="tricon"> <i class="fas fa-trash-alt tr1 "></i>
          </div>

          <div class="round1" for="circlecheckbox">
            <input id="circlecheckbox" type="checkbox" style="" />
            <label for="circlecheckbox"> </label>
          </div>
          <img class="rounded-circle" src="pot3.jpg" id="imgprop" alt="I'm tag1" />


          <div class="card-body">
            <h5 class="card-title">Potrait 2</h5>
            <p class="card-text">Horizon.</p>
          </div>
        </label>
      </div>




      #tag1:checked+div>label>div>label {

        border: 1px solid #ccc;
        border-radius: 50%;
        cursor: pointer;
        height: 14px;
        left: 6px;
        position: absolute;
        top: 6px;
        width: 14px;

      }

      #tag1:checked+div>label>div>label:after {

        border: 1px solid #ccc;
        border-radius: 50%;
        cursor: pointer;
        height: 14px;
        left: 6px;
        position: absolute;
        top: 6px;
        width: 14px;

      }



      .round1 label {
        border: 1px solid #ccc;
        border-radius: 50%;
        cursor: pointer;
        height: 14px;
        left: 6px;
        position: absolute;
        top: 6px;
        width: 14px;
      }

      .round1 label:after {
        border: 1px solid #fff;
        border-top: none;
        border-right: none;
        content: "";
        left: 4px;
        top: 5px;
        height: 2px;
        opacity: 0;
        position: absolute;
        transform: rotate(-45deg);
        width: 5px;
      }

      .round1 input[type="checkbox"] {
        visibility: hidden;
      }


      .round1 input[type="checkbox"]:checked+label {
        background-color: #419AF7;
        border-color: #419AF7;
      }


      .round1 input[type="checkbox"]:checked+label:after {
        opacity: 1;
      }

PS: I Я очень новичок в веб-дизайне и CSS, извините, если название моего вопроса не имеет точного смысла.

...