徘徊在无序列表项目时查找当前图标

Question

我有一类侧和UL与类资产净值的股利和徘徊悬停上课的时候提示我显示工具提示文本类的更多利项目的子菜单。当我将鼠标悬停在与类的头，我需要把刚衣柜图标类白色的跨度什么，我试图完成的。这意味着在当前的李的图标。

<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（包括儿童）时，图标会改变颜色。在这种情况下，试试这个：

$(".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");
 }
);