时间戳

首页 > 解决方案 > 当我们使用jquery悬停div时如何使Class保持不变

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

问题描述

我已经为网站开发了行业页面，但是当我们悬停该类时的问题应该是恒定的，并且当我们将光标移至之前的图像时，应该显示图像和边框。并且边框不应该显示在下面我已经共享了代码和脚本请帮助我任何人。

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

在此处输入图像描述

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

标签： javascriptjqueryhtmlcss

解决方案

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

$(".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");
 });

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

推荐阅读