切换具有相同类的多个li的特定元素

问题描述 投票：0回答：2

我有一个代码如下

  <html>
  <body>
 <ul class="featured-categories__list row" id="featured-categories">

        <li class="featured-categories__list__item col-sm-4">               

            <a class="product-box__box-link product-box__box-link--light product-box__box-link--content-bottom" id="secCatLnk1" href="">
                <div class="featured-categories__list__item__text" style="display: block;">
                <h2 class="featured-categories__list__item__text__heading" id="secCatTxt1">DECORATIONS</h2>
                <div class="featured-categories__list__item__focus-text__call-to-action" id="secSubCatTxt1">Shop now</div>
                </div>
            </a>
            <div class="featured-categories__list__item__focus-text" style="display: none;">
                <h4 class="heading-level-five featured-categories__list__item__focus-text__heading" id="secDescText1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <p class="featured-categories__list__item__focus-text__call-to-action" id="secShopText1">Shop now</p>
            </div>
        </li>
        <li class="featured-categories__list__item col-sm-4">


            <a class="product-box__box-link product-box__box-link--light product-box__box-link--content-bottom" id="secCatLnk2" href="">
                <div class="featured-categories__list__item__text" style="display: block;">
                    <h2 class="featured-categories__list__item__text__heading" id="secCatTxt2">CHRISTMAS CARDS</h2>
                    <div class="featured-categories__list__item__focus-text__call-to-action" id="secSubCatTxt2">Shop now</div>
                </div>
            </a>
            <div class="featured-categories__list__item__focus-text" style="display: none;">
                <h4 class="heading-level-five featured-categories__list__item__focus-text__heading" id="secDescText2">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <p class="featured-categories__list__item__focus-text__call-to-action" id="secShopText2">Shop now</p>
            </div>
        </li>
        <li class="featured-categories__list__item col-sm-4">           


            <a class="product-box__box-link product-box__box-link--light product-box__box-link--content-bottom" id="secCatLnk3" href="">
              <div class="featured-categories__list__item__text" style="display: block;">
                <h2 class="featured-categories__list__item__text__heading" id="secCatTxt3">GIFTS FOR HIM</h2>
                <div class="featured-categories__list__item__focus-text__call-to-action" id="secSubCatTxt3">Shop now</div>
              </div>
            </a>
            <div class="featured-categories__list__item__focus-text" style="display: none;">
                <h4 class="heading-level-five featured-categories__list__item__focus-text__heading" id="secDescText3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <p class="featured-categories__list__item__focus-text__call-to-action" id="secShopText3">Shop now</p>
            </div>  
        </li>              

    </ul>
   <script>  
        $(document).ready(function($){  
      $('.featured-categories__list__item').mouseover(function() {

            $('.featured-categories__list__item__text').hide();
            $('.featured-categories__list__item__focus-text').show();
        }).mouseout(function() {
            $('.featured-categories__list__item__text').show();
            $('.featured-categories__list__item__focus-text').hide();
        });
   });
   </script>

当鼠标悬停在“featured-categories__list__item”上时，我试图显示班级“featured-categories__list__item__focus-text”。

上面的代码工作正常，但不适用于特定的悬停元素。

相反，它显示了具有相同类的所有其他元素。

我需要展示多个李的特殊悬停元素。

如何避免这一个。请任何人研究这个并分享您的想法。谢谢

jquery html mouseevent mouseover
2个回答
2
投票

您可以使用$(this)和.children()来指定您定位的element中的哪一个。

示例：$(this).children('.featured-categories__list__item__text').hide();

请参阅代码段：

$(document).ready(function($) {
  $('.featured-categories__list__item').mouseover(function() {
    $(this).children('.featured-categories__list__item__text').hide();
    //$('.featured-categories__list__item__text').hide();
    // $('.featured-categories__list__item__focus-text').show();
    $(this).children('.featured-categories__list__item__focus-text').show();
  }).mouseout(function() {
    $(this).children('.featured-categories__list__item__text').show();
    //$('.featured-categories__list__item__text').show();
    // $('.featured-categories__list__item__focus-text').hide();
    $(this).children('.featured-categories__list__item__focus-text').hide();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="featured-categories__list row" id="featured-categories">

        <li class="featured-categories__list__item col-sm-4">               

            <a class="product-box__box-link product-box__box-link--light product-box__box-link--content-bottom" id="secCatLnk1" href="">
                <div class="featured-categories__list__item__text" style="display: block;">
                <h2 class="featured-categories__list__item__text__heading" id="secCatTxt1">DECORATIONS</h2>
                <div class="featured-categories__list__item__focus-text__call-to-action" id="secSubCatTxt1">Shop now</div>
                </div>
            </a>
            <div class="featured-categories__list__item__focus-text" style="display: none;">
                <h4 class="heading-level-five featured-categories__list__item__focus-text__heading" id="secDescText1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <p class="featured-categories__list__item__focus-text__call-to-action" id="secShopText1">Shop now</p>
            </div>
        </li>
        <li class="featured-categories__list__item col-sm-4">


            <a class="product-box__box-link product-box__box-link--light product-box__box-link--content-bottom" id="secCatLnk2" href="">
                <div class="featured-categories__list__item__text" style="display: block;">
                    <h2 class="featured-categories__list__item__text__heading" id="secCatTxt2">CHRISTMAS CARDS</h2>
                    <div class="featured-categories__list__item__focus-text__call-to-action" id="secSubCatTxt2">Shop now</div>
                </div>
            </a>
            <div class="featured-categories__list__item__focus-text" style="display: none;">
                <h4 class="heading-level-five featured-categories__list__item__focus-text__heading" id="secDescText2">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <p class="featured-categories__list__item__focus-text__call-to-action" id="secShopText2">Shop now</p>
            </div>
        </li>
        <li class="featured-categories__list__item col-sm-4">           


            <a class="product-box__box-link product-box__box-link--light product-box__box-link--content-bottom" id="secCatLnk3" href="">
              <div class="featured-categories__list__item__text" style="display: block;">
                <h2 class="featured-categories__list__item__text__heading" id="secCatTxt3">GIFTS FOR HIM</h2>
                <div class="featured-categories__list__item__focus-text__call-to-action" id="secSubCatTxt3">Shop now</div>
              </div>
            </a>
            <div class="featured-categories__list__item__focus-text" style="display: none;">
                <h4 class="heading-level-five featured-categories__list__item__focus-text__heading" id="secDescText3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <p class="featured-categories__list__item__focus-text__call-to-action" id="secShopText3">Shop now</p>
            </div>  
        </li>              

    </ul>
0
投票
   <script>  
        $(document).ready(function($){  
      $('.featured-categories__list__item').mouseover(function() {
            $(this).find('a div .featured-categories__list__item__text').hide();

            $(this).find('.featured-categories__list__item__focus-text').show();
        }).mouseout(function() {
            $(this).find('a div .featured-categories__list__item__text').show();
            $(this).find('.featured-categories__list__item__focus-text').hide();

        });
   });
   </script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.