Какая вложенность должна быть у хтмл элементов, чтобы сверстать такую штуку?

Question

[Raul Abdullin]

Подскажите пожалуйста, как добиться такого эффекта. Здесь вероятно должна быть какая-то вложенность ul, li, возможно ссылок и баттанов. Т.е. мне нужно чтобы при наведении на иконку или на li текст менял цвет, а иконка превращалась в крестик. Вопрос заключается в том, какую вложенность стоит выбрать? Я думал как-то так, но если так, то svg иконки куда засовывать?

<ul>
            <li><a href="#">Laura Jordan</a></li>
             <li><a href="#">Laura Jordan</a></li>
             <li><a href="#">Laura Jordan</a></li>
          </ul>

Answer 1

[Stalker_RED]

li {
  position: relative;
}
li:hover {
  color: red;
}
li:after {
  position: absolute;
  right: 0;
  top: 0;
  content: 'v'; /* можно подставить svg иконку фоном */
}
li:hover:after {
  content: 'x';
}

https://jsfiddle.net/7ekvz5ja/

Comments

[Raul Abdullin]

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

[Raul Abdullin]

ой нет, это я тупанул, да всё работает, как я хотел. По моей задумке при нажатии на иконку или текст, он будет удаляться. Возможно стоит это всё в button заключить как считаете?

[Stalker_RED]

raulvodov, или повесить обработчик клика на сам элемент. Мне кажется это даже проще.

[Raul Abdullin]

Stalker_RED, а что значит обработчик клика?

[Stalker_RED]

raulvodov, вы писали

Возможно стоит это всё в button заключить как считаете?

Я считаю, что это лишнее, ведь можно обрабатывать клики на самом элементе li, и не обязательно вводить дополнительный button.
https://jsfiddle.net/Stalk/7ekvz5ja/1/

Answer 2

[ElijahTr]

Можно так:
https://codepen.io/elijah_tr/pen/RjejOV

Если нужно изменение иконки после нажатия (и сохранение состояния) то придется добавить чекбоксы.

upd: https://codepen.io/elijah_tr/pen/bYQYJY (можно и нужно улучшить)

Comments

[Raul Abdullin]

в целом гуд, только непонятно, почему при наведении курсора на иконка, она начинает моргать, тут вся идея заключается в том, что при нажатии на крестик в будущем, текст будет удаляться. Думаю вы это поняли. Сделано гуд, но как избавиться от моргания иконки при ховере?

[ElijahTr]

https://codepen.io/elijah_tr/pen/bYQYJY примерно так, но надо причесать немного.

[Raul Abdullin]

ElijahTr, спасибо большое