CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapfont-awesome
Daniel
Daniel

Reputation: 1466

Want to display font awesome when hover

I have navigation. I want to display icon when hover on a particular a tag.

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

I know my JS is wrong because when you hover on any a it will show the icon on all other a also. I don't know how to use 'this' in JS. Can anyone help?

Upvotes: 1

Views: 104

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You need to use this to find the element within the one which triggered the event:

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

Or alternatively you can use a single hover handler and toggle:

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

Upvotes: 1

Related Questions