Доброго времени суток. Задача: при наведении на элемент списка(li) рядом с ним должна появляться метка желтого цвета, а при нажатии на него метка должна ставится или сниматься. Я добавил внутрь элемента списка span и дал ему стили. Не совсем понимаю как обратится к дочернему элементу списка(span), что бы метка появлялась только у того элемента, на который нажал, а не у всех сразу. Так же, надо что бы на Скрин https://prnt.sc/iaay1l
Прошу подсказать как обратиться только к дочернему элементу, а не ко всем элементам с таким же классом.
ul {
width: 350px;
}
.sorting_main {
font-weight: 500;
font-family: "Roboto", sans-serif;
}
.sorting_type__list,
.sorting_amount__list {
text-transform: capitalize;
color: #000;
cursor: pointer;
}
.sorting_type__list:hover .checked-mark,
.sorting_amount__list:hover .checked-mark {
display: inline-block;
}
.checked-mark {
display: none;
width: 10px;
height: 10px;
background: #e6b738;
border-radius: 1em;
float: right;
margin-top: 7px;
margin-right: 10px;
}
<ul class="type">
<li class="sorting_main sorting_type__list">Тип объекта <i class="fas fa-caret-down"></i></li>
<li class="sorting_type__list" value="apartment">квартира <span class="checked-mark"></span></li>
<li class="sorting_type__list" value="room">комната <span class="checked-mark"></span></li>
<li class="sorting_type__list" value="house">дом <span class="checked-mark"></span></li>
<li class="sorting_type__list" value="cottage">коттедж <span class="checked-mark"></span></li>
</ul>
this
тебе в помощь$(this).children'('span')