使用相同 class 切换多个 li 的特定元素

Question

我有下面的代码

  <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[=28 上时显示 class“featured-categories__list__item__focus-text” =]".

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

而是显示具有相同 class.
的所有其他元素
我需要显示多个 li 的特定悬停元素。

如何避免这一点。请任何人对此进行调查并分享您的想法。谢谢

Answer 1

您可以使用 $(this) and .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>

Answer 2

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

使用相同 class 切换多个 li 的特定元素

Toggle particular element of multiple li with same class

jquery

html

mouseevent

mouseover