想要在悬停时显示字体真棒答案

【问题标题】：Want to display font awesome when hover想要在悬停时显示字体真棒
【发布时间】：2015-02-19 02:56:46
【问题描述】：

我有导航。我想在将鼠标悬停在特定的 a 标签上时显示图标。

<ul class="nav nav-pills nav-justified">
    <li>
        <a href="#" class="linked">
            All  <i class="fa fa-align-justify justify"></i>
        </a>
    </li>
    <li>
        <a href="#" class="linked">
            DEVELOPMENT <i class="fa fa-align-justify justify"></i>
        </a>
    </li>
    <li>
        <a href="#" class="linked">
            BRANDING <i class="fa fa-align-justify justify"></i>
        </a>
    </li>
    <li>
        <a href="#" class="linked">
            DESIGN <i class="fa fa-align-justify justify"></i>
        </a>
    </li>
    <li>
        <a href="#" class="linked">
            PRINT <i class="fa fa-align-justify justify"></i>
        </a>
    </li>
</ul>

.justify{
    display: none;
}

$('.linked').hover(function(){
    $('.justify').show("slow");
},function(){
    $(".justify").hide("slow");
});

我知道我的 JS 是错误的，因为当您将鼠标悬停在任何 a 上时，它也会在所有其他 a 上显示图标。我不知道如何在 JS 中使用“this”。有人可以帮忙吗？

【问题讨论】：

标签： jquery html css twitter-bootstrap font-awesome

【解决方案1】：

您需要使用this 来查找触发事件的元素：

$('.linked').hover(function(){
    $('.justify', this).show("slow");
},function(){
    $(".justify", this).hide("slow");
});

或者，您也可以使用单个 hover 处理程序和 toggle：

$('.linked').hover(function(){
    $('.justify', this).toggle("slow");
});

【讨论】：