javascript - 当我们使用 jquery 将 div 悬停时如何使 Class 保持不变

Question

我已经为网站开发了行业页面，但是当我们悬停该类时出现的问题应该是不变的，当我们移除光标时图像和边框应该显示在以前的图像上。并且边框不应该显示在下面我已经分享了代码和脚本请帮助我。

我在这里分享演示，请查看 http://floretmedia.net/temp/tgs/industries.php

enter image description here

 $(document).ready(function(){
     $(".food").hover(function(){
       $("#food").show();
       $("#fmcg").hide();
       $("#retail").hide();
     });
     $(".fmcg").hover(function(){
        $("#food").hide();
        $("#fmcg").show();
        $("#retail").hide();
     });
      $(".retail").hover(function(){
         $("#food").hide();
         $("#fmcg").hide();
         $("#retail").show();
      });
       $(".indus-icn-lst").hover(function(){
       $(this).find(".indus-category");
       $(this).toggleClass("indusactive");
      });
 }); 

.indus-list{border-right:1px solid #FFC300;}
.indus h2{
  font-size: 46px;
  letter-spacing: -1px;
  display: inline-block;
  margin-left: 20px;
  margin-top: 38px;
}
.indus-icn-lst{
  width:100px;
  height: 100px;
  margin: auto;
}
.food{background: url(../images/icon-spirite.png)-130px -181px;}
.indusactive.food {background: url(../images/icon-spirite.png)-25px -181px;}
.fmcg{background: url(../images/icon-spirite.png)-300px -181px;}
.indusactive.fmcg{background: url(../images/icon-spirite.png)-225px -181px;}
.retail{background: url(../images/icon-spirite.png)-300px -181px;}
.electronic{background: url(../images/icon-spirite.png)-300px -181px;}
.black-bg{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background:#0000009c;
  padding: 80px 40px;
}
.indusactive:after{
  right: -150px;
  position: absolute;
  content: "";
  height: 100px;
  width: 15px;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  background: #FDC300;
}
.indus-category{display: none}
.indusactive{display: block;}
.indusactive:after{
  right: -150px;
  position: absolute;
  content: "";
  height: 100px;
  width: 15px;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  background: #FDC300;
}

<section class="industries cf">
  <div class="wd-20 text-center pt-65 indus-list">
    <h4 class="mb-35">INDUSTRIES</h4>
    <div class="indus-icon text-center">
       <div class="indus-icn-lst food">
       </div>  <!-- indus-item -->
        <div class="indus-icn-lst fmcg">
       </div>  <!-- indus-item -->
       <div class="indus-icn-lst retail">
       </div>  <!-- indus-item -->
       <div class="indus-icn-lst electronic">
       </div>  <!-- indus-item -->
    </div> <!-- indus-icon -->
  </div><!-- indus-list -->
  <div id="food" class="indus">
     <div class="wd-40 px-65 indus-txt">
        <div class="beverage cf">
           <div class="indus-img-dlt mb-4">
             <img src="images/icons/food.png" alt="food"/>
           </div><!-- indus-img-dlt -->
            <h2>Food &  Beverage</h2>
            <div class="mt-2 cf">
              <p class="cb">Fresh , On Time Every time</p>
               <p>Believe in Time Global Shipping  when you need a trust worthy logistic and supply chain vendor to help plan the daily operations . We help our food and beverage clients to solve the supply and delivery challenges with their daily supplies . From product pick up through the delivery, We provide :</p>
              <ul class="d-block mb-3">
                <li>A temperature controlled supply chain (uninterrupted cold chain for both fleet and warehousing)</li>
                <li>Flexible vendor pickups and just-in-time delivery</li>
                <li>Equipment tracking</li>
                <li>Understanding of store and vendor requirements</li>
                <li>Delivery coordination between vendors and stores</li>
             </ul>
              <p>Our approach is simple. Our industry knowledge allow us to engineer distribution networks that exceed our customers' expectations. By reducing miles and time, you'll get the benefit of delivering a fresher product.</p>
              <p>When you need to deliver the freshest food and beverage products daily, partner with the experts who know your business as well as you do.</p>
          </div><!-- mt-2 -->
        </div> <!-- beverage -->
     </div><!-- indus-txt -->
     <div class="wd-40 indus-dlt-img">
       <div class="beverage-img">
          <figure>
            <img src="images/industries/fmcg.jpg" alt="food and beverage"/>
         </figure>
      </div><!-- beverage-img -->
      <div class="black-bg">
      </div>
     </div><!-- indus-dlt-img -->
  </div><!-- indus -->
  <div class="indus indus-category" id="fmcg">
     <div class="wd-40 px-65 indus-txt">
        <div  class="beverage cf">
           <div class="indus-img-dlt mb-4">
              <img src="images/icons/fmcg.png" alt="Fmcg"/>
           </div><!-- indus-img-dlt -->
            <h2>FMCG</h2>
            <div class="mt-2 cf">
              <p class="cb">Fresh , On Time Every time</p>
               <p>Believe in Time Global Shipping  when you need a trust worthy logistic and supply chain vendor to help plan the daily operations . We help our food and beverage clients to solve the supply and delivery challenges with their daily supplies . From product pick up through the delivery, We provide :</p>
              <ul class="d-block mb-3">
                <li>A temperature controlled supply chain (uninterrupted cold chain for both fleet and warehousing)</li>
                <li>Flexible vendor pickups and just-in-time delivery</li>
                <li>Equipment tracking</li>
                <li>Understanding of store and vendor requirements</li>
                <li>Delivery coordination between vendors and stores</li>
             </ul>
              <p>Our approach is simple. Our industry knowledge allow us to engineer distribution networks that exceed our customers' expectations. By reducing miles and time, you'll get the benefit of delivering a fresher product.</p>
              <p>When you need to deliver the freshest food and beverage products daily, partner with the experts who know your business as well as you do.</p>
          </div><!-- mt-2 -->
        </div> <!-- beverage -->
     </div><!-- indus-txt -->
     <div class="wd-40 indus-dlt-img">
       <div class="fmcg-img">
          <figure>
            <img src="images/industries/retail.jpg" alt="Retail"/>
         </figure>
      </div><!-- fmcg-img -->
      <div class="black-bg">
      </div>
     </div><!-- indus-dlt-img -->
  </div><!-- indus -->  
  <div class="indus indus-category" id="retail">
     <div class="wd-40 px-65 indus-txt">
        <div class="beverage cf">
           <div class="indus-img-dlt mb-4">
              <img src="images/icons/retail.png" alt="retail"/> 
           </div><!-- indus-img-dlt -->
            <h2>RETAIL</h2>
            <div class="mt-2 cf">
              <p class="cb">We have experience in serving the delivery and retail supply chain management needs of stores of all sizes and configurations. From big box to convenience.</p>
               <p>Time Global shipping's retail logistic services can be of your benefit in ways of reducing costs. Helping you serve your customers better and improving inventory management.</p>
              <p>We engineer distribution networks that work for retail. Efficient routes and resources utilization tailored to seasonal ups and downs.</p>
              <p>Our well-trained and courteous drivers provide excellent customer service to stores and use the most-advanced technology available to monitor, track, and trace products.</p>
          </div><!-- mt-2 -->
        </div> <!-- beverage -->
     </div><!-- indus-txt -->
     <div class="wd-40 indus-dlt-img">
       <div class="retail-img">
          <figure>
            <img src="images/industries/food.jpg" alt="food and beverage"/>
         </figure>
      </div><!-- fmcg-img -->
      <div class="black-bg">
      </div>
     </div><!-- indus-dlt-img -->
  </div><!-- indus -->
</section>

Answer 1

如果我理解正确，您可以替换这部分代码:

$(".indus-icn-lst").hover(function(){
    $(this).find(".indus-category");
    $(this).toggleClass("indusactive");
});

使用这段代码:

$(".indus-icn-lst").hover(function(){
    $(this).siblings().removeClass('indusactive')
    $(this).find(".indus-category");
    $(this).addClass("indusactive");
 });

这会将类设置为悬停并保留它，但当您悬停另一个类别时将其删除