Поиск текущего значка при наведении на неупорядоченные элементы списка

Question

У меня есть div с классом side и ul с классом nav с и при наведении курсора на подсказку класса. Я отображаю текстовый класс подсказки для подменю с большим количеством элементов li.То, что я пытаюсь сделать, это когда я наведу курсор на промежуток с заголовком класса, мне нужно просто повернуть белый значок класса шкафа.Значение значка в этом текущем li.

<div class="side">
<ul class="nav">

    <li><--so when hovering over this li
        <i class="fas fa-calendar-alt fa-3x fa-alignment"></i> <-- this icon needs to be turned white
        <div class="tooltip">
            <span class="header">Activity</span>
            <ul class="tooltiptext">
                <li><a href="/ActivityLinks/ActivityEvents">Events</a></li>
                <li><a href="/ActivityLinks/ActivityEvents">Events</a></li>
                <li><a href="/ActivityLinks/ActivityEvents">Events</a></li>
                <li><a href="/ActivityLinks/ActivityEvents">Events</a></li>
                <li><a href="/ActivityLinks/ActivityEvents">Events</a></li>
                <li><a href="/ActivityLinks/ActivityEvents">Events</a></li>
            </ul>
        </div>
    </li>

        <li>
        <i class="fas fa-file-invoice-dollar fa-3x fa-alignment"></i>
        <div class="tooltip">
            <span class="header">Work</span>
            <ul class="tooltiptext">
                <li><a href="/worklink/ActivityEvents">work links</a></li>
                <li><a href="/worklink/ActivityEvents">work links</a></li>
                <li><a href="/worklink/ActivityEvents">work links</a></li>
                <li><a href="/worklink/ActivityEvents">work links</a></li>
                <li><a href="/worklink/ActivityEvents">work links</a></li>
                <li><a href="/worklink/ActivityEvents">work links</a></li>
            </ul>
        </div>
    </li>


        <li>
        <i class="fas fa-hand-holding-usd fa-3x fa-alignment"></i>
        <div class="tooltip">
            <span class="header">other</span>
            <ul class="tooltiptext">
                <li><a href="/otherLink">Link</a></li>
                <li><a href="/otherLink">Link</a></li>
                <li><a href="/otherLink">Link</a></li>
                <li><a href="/otherLink">Link</a></li>
                <li><a href="/otherLink">Link</a></li>
                <li><a href="/otherLink">Link</a></li>
            </ul>
        </div>
    </li>
</ul>
</div>

Итак, я попробовал

$('span.header').hover(function () {                                    
        $('.fa-alignment').closest('i').css("color", "white");

    });

, который делает все иконки белыми.Я смотрел на одноуровневые селекторы и первый селектор, но не уверен, как этого добиться.

Любая помощь приветствуется.

Спасибо

Answer 1

Я немного сбит с толку, читая ваш вопрос и комментарии в вашем примере html.

То, что я пытаюсь сделать, это когда я нахожу курсор на промежуток с заголовком класса, мне нужно просто повернутькласс значка шкафа белый.

Предполагается, что значок должен изменяться только при наведении курсора span.header.В этом случае вы можете попробовать:

$("span.header").hover(function() {
  $(this).closest("li").find(".fa-alignment").css("color", "white");
}, function() {
  $(this).closest("li").find(".fa-alignment").css("color", "black");
});

<- поэтому при наведении курсора на этот li <- этот значок должен стать белым </p>

Предлагает значокдолжен поменять цвет при наведении li (включая его дочерние элементы).В этом случае попробуйте следующее:

$(".nav > li").hover(function() {    
  $(this).find(".fa-alignment").css("color", "white");
}, function() {
  $(this).find(".fa-alignment" ).css("color", "black");
});

Но этот последний пример может быть легко достигнут с использованием CSS:

.nav > li:hover > .fa-alignment {
  color: white;
}

Answer 2

Попробуйте этот код:

$( "li" ).hover(
 function() {    
$( this ).find("i").css("color", "white");
}, function() {
$( this ).find( "i" ).css("color", "black");
 }
);