想在悬停时显示真棒字体

Question

我有导航。我想在悬停在特定 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'。有人可以帮忙吗？

Answer 1

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

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

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

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

想在悬停时显示真棒字体

Want to display font awesome when hover

jquery

html

css

twitter-bootstrap

font-awesome