Как сделать отражение класса в текущем элементе Jquery?

Question

[Nikita_Migushev]

Есть to-do лист.

Таски содержатсья в <li> элементах.

в каждом есть также изображеие крестика для удаления.

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

HTML

<div class="to-do-tasks connectedSortable">
                    <ul>
                        <li class="task">Task 1
                            <img src="images/cancel.svg" class="cancelIcon cancelTask" alt="">
                        </li>
                        <li class="task">Task 2
                            <img src="images/cancel.svg" class="cancelIcon cancelTask" alt="">
                        </li>
</div>

Jquery

$(".task").mouseenter(function () {
        $(".cancelTask").css('display', 'block');
    })

    $(".task").mouseout(function () {
        $(".cancelTask").css('display', 'none');
    })

Answer 1

[Леонид Тючкалов]

Попробуй что-то такое
$(«ul li:first») — получить только первый элемент из списка

Comments

[Nikita_Migushev]

Ага, спасибо.

Только вот нашел еще такой способ

$(".task").mouseenter(function () {
        $('img', this).css('display', 'block')
    })

    $(".task").mouseout(function () {
        $('img', this).css('display', 'none')
    })