Как игнорировать активную область дочернего элемента, когда parent: active включен?

Question

Я программирую список дел с помощью реакции. В CSS я сделал li: active, чтобы вызвать анимацию увеличения высоты, однако я уже запрограммировал <span>x </span> на onClick для удаления соответствующего элемента. Моя проблема в том, что span является дочерним элементом li, и каждый раз, когда я нажимаю на него, он вызывает микро анимацию, потому что он находится в том же пространстве, что и li. Не уверен, какой подход я могу сделать, чтобы это исправить.

это структура списка:

<ul>
 <li>
to-do text
  <span> X </span>
 </li>
</ul>

полный код на codesandbox

Answer 1

Вы можете использовать button вместо span, а затем использовать этот CSS трюк

<button key={i.id + "x"} refx={i.id} onClick={deleteItem}>
            x
          </button>

CSS:

li:active:not(:focus):not(:focus-within)  {
  background-color: rgb(248, 4, 4);
  box-shadow: 0 8px 0 0 rgba(0, 0, 0, 0.15);
  margin-bottom: 15px;
  margin-top: 10px;
  margin-bottom: 15px; 
 }

примеры кодов andbox , надеюсь, будет полезен