Как правильно использовать nth-child и hover в этом задании?

Question

Нужно создать страницу с 5 рядами и 6 людьми в каждом ряду. Наверх добавить изображение перчатки при наведении на которую каждый 2 человек должен пропасть, чтобы было так как на картинке.

Надеюсь доступно объснил и вы сможите мне как-то помочь выполнить это задание заранее спасибо)

Answer 1

.items {width: 25px; height: 25px; background: green;}

div {display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 5px; margin: 5px 0;}

div>span {width: 25px; height: 25px; background: red;}

.items:hover~div:nth-child(2)>span:nth-child(odd),
.items:hover~div:nth-child(3)>span:nth-child(even),
.items:hover~div:nth-child(4)>span:nth-child(odd),
.items:hover~div:nth-child(5)>span:nth-child(even),
.items:hover~div:nth-child(6)>span:nth-child(odd) {
  opacity: 0;
}

<div class="items"></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span></div>

БЛОГ НА HUSL

Как правильно использовать nth-child и hover в этом задании?

Ответы (1 шт):