I have hidden icon and link (a) elements. I want that when you hover on a only nearest I show.

Now every time you hover one a all icons show hide.

I already tried: 

```
$(this).closest(".fa.fa-arrow-right").show();

```

but it doesn't work.

```
jQuery(document).ready(function($) {
    $('i.fa.fa-arrow-right').hide();

    $('.mega-menu a').bind('mouseover', function() {
        $('i.fa.fa-arrow-right').show();
    }); 

    $('.mega-menu a').bind('mouseleave', function() {
        $('i.fa.fa-arrow-right').hide();
    });  
});

```

Here is important part of html:

```
<div class="vc_row wpb_row vc_inner vc_row-fluid">
    <div class="wpb_column vc_column_container vc_col-sm-4">
        <div class="vc_column-inner ">
            <div class="wpb_wrapper">
                <div class="wpb_text_column wpb_content_element ">
                    <div class="wpb_wrapper">
                        <p><i class="fa fa-arrow-right" style="display: none;"></i><a href="#">Lorem Ipsum</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="wpb_column vc_column_container vc_col-sm-4">
        <div class="vc_column-inner "><div class="wpb_wrapper">
            <div class="wpb_text_column wpb_content_element ">
                <div class="wpb_wrapper">
                    <p><i class="fa fa-arrow-right" style="display: none;"></i><a href="#">Lorem Ipsum</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="wpb_column vc_column_container vc_col-sm-4">
    <div class="vc_column-inner "><div class="wpb_wrapper">
        <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
                <p><i class="fa fa-arrow-right" style="display: none;"></i><a href="#">Lorem Ipsum</a></p>
            </div>
        </div>
    </div>
</div>

```