:hover 选择器 改用 jQuery使用延迟

<div class="btn_menu">
   <div class="btn"><img class="icon" src="xx.png" alt="xx"/>
      <p class="icon_p">开发语言</p>
   </div>
   <ul class="menu">
      <li class="li_menu">
         <div class="box">
            <a href="/"><img class="icon_img" src="java.png" alt="xx2"/>java</a>
         </div>
         <div class="vertical"></div>
         <div class="box">
            <a href="/"><img class="icon_img" src="php.png" alt="xx3"/>php</a>
         </div>
         <div class="box_vertical"></div>
         <div class="box">
            <a href="/"><img class="icon_img" src="C++.png" alt="prad17"/>C++</a>
         </div>
      </li>
   </ul>
</div>
<div class="btn_menu">
   <div class="btn"><img class="icon" src="xx.png" alt="xx"/>
      <p class="icon_p">开发语言2</p>
   </div>
   <ul class="menu">
      <li class="li_menu">
         <div class="box">
            <a href="/"><img class="icon_img" src="java.png" alt="xx2"/>java2</a>
         </div>
         <div class="vertical"></div>
         <div class="box">
            <a href="/"><img class="icon_img" src="php.png" alt="xx3"/>php2</a>
         </div>
         <div class="box_vertical"></div>
         <div class="box">
            <a href="/"><img class="icon_img" src="C++.png" alt="xx4"/>C++2</a>
         </div>
      </li>
   </ul>
</div>
<div class="btn_menu">
   <div class="btn"><img class="icon" src="xx.png" alt="xx"/>
      <p class="icon_p">开发语言3</p>
   </div>
   <ul class="menu">
      <li class="li_menu">
         <div class="box">
            <a href="/"><img class="icon_img" src="java.png" alt="xx2"/>java3</a>
         </div>
         <div class="vertical"></div>
         <div class="box">
            <a href="/"><img class="icon_img" src="php.png" alt="xx3"/>php3</a>
         </div>
         <div class="box_vertical"></div>
         <div class="box">
            <a href="/"><img class="icon_img" src="C++.png" alt="xx4"/>C++3</a>
         </div>
      </li>
   </ul>
</div>

script:

$(function () {
   let tm;
   $(".btn_menu").hover(function () {
      let _this = $(this);
      tm = setTimeout(function(){                
         _this.children('.btn').css('color','#2770B8').css('opacity','1');
         _this.children('.menu').addClass('show');
      },200);
   },function () {
      clearTimeout(tm);           
      $(this).children('.btn').css('color','currentColor').css('opacity','0.68');
      $(this).children('.menu').removeClass('show');
   })
});
发布了52 篇原创文章 · 获赞 15 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/qq_41408081/article/details/100538721