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

我在下面有一个代码

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

当鼠标悬停在"精选categories__list__item"上时，我正在尝试显示类">精选categories__list__item__focus文本"。

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

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

我需要显示多个 li 的特定悬停元素。

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

您可以使用

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

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

相关内容

最新更新

热门标签：