时间戳

首页 > 解决方案 > 如何仅显示最近的 i 元素？

jquery - 如何仅显示最近的 i 元素？

问题描述

我有隐藏的图标和链接 (a) 元素。当您将鼠标悬停在我显示的唯一最近的位置时，我想要那个。

现在，每次您将鼠标悬停时，所有图标都会显示隐藏。

我已经尝试过： 

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

但它不起作用。

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

这是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>

标签： jquery

解决方案

尝试这个。

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

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

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

推荐阅读