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>

当鼠标悬停在“ 功能类别__list__item ”上时，我试图显示类“ 功能类别__list__item__focus-text ”。

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

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

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

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

Answer 1

您可以使用$(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>

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>

切换同一类的多个li的特定元素

2 个答案: