将鼠标悬停在无序列表项上时查找当前图标答案

【问题标题】：Finding current icon when hovering over unordered list items将鼠标悬停在无序列表项上时查找当前图标
【发布时间】：2019-02-06 20:04:03
【问题描述】：

我有一个带有 side 类的 div 和一个带有 nav 类的 ul，当悬停悬停类工具提示时，我将工具提示文本类显示为更多 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");

    });

这会将所有图标变为白色。我查看了兄弟选择器和第一个选择器，但不确定如何实现此行为。

感谢任何帮助。

谢谢

【问题讨论】：

标签： jquery html css

【解决方案1】：

阅读您的问题和示例 html 中的 cmets，我有点困惑。

我想要完成的是，当我将鼠标悬停在带有类标题的跨度上时，我只需要将壁橱图标类变为白色。

建议您希望图标仅在悬停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;
}

【讨论】：

【解决方案2】：

试试这个代码：

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

【讨论】：