代码之家 › 专栏 › 技术社区 › iamaaarianme

分隔鼠标进入和鼠标离开

jquery javascript

iamaaarianme · 技术社区 · 3 年前

我有两个分区(CSS是 TailwindCss )

$(document).on("mouseover", "#imagebox", function() {
  $("#PictureHoverPanel").removeClass("invisible");

})

$(document).on("mouseout", "#imagebox", function() {
  $("#PictureHoverPanel").addClass("invisible");

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" integrity="sha512-wl80ucxCRpLkfaCnbM88y4AxnutbGk327762eM9E/rRTvY/ZGAHWMZrYUq66VQBYMIYDFpDdJAOGSLyIPHZ2IQ==" crossorigin="anonymous" />


<div id="PictureHoverPanel" class="invisible absolute flex flex-col justify-center rounded-xl bg-gray-600 opacity-70">
  <div class="flex justify-center">
    <a class="bg-gray-800 px-2 py-1 text-white border border-red-800 font-semibold cursor-pointer">Remove</a>

  </div>

</div>
<img id="imagebox" class="w-48 h-48 rounded-xl md:w-64 md:h-64" src="https://picsum.photos/seed/1/100">

问题就在我进去的时候 #imagebox 每次鼠标移动都会触发 mouseout 导致眨眼非常快的事件。我如何确保 invisible 除非光标完全离开,否则不会添加类 imagebox

0 回复 | 直到 3 年前

Divyanshi Mishra 3 年前

$(document).on("mouseover", "#imagebox", function() {
  $("#PictureHoverPanel").removeClass("invisible");

})

$(document).on("mouseout", "#imagebox", function() {
  $("#PictureHoverPanel").addClass("invisible");

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" integrity="sha512-wl80ucxCRpLkfaCnbM88y4AxnutbGk327762eM9E/rRTvY/ZGAHWMZrYUq66VQBYMIYDFpDdJAOGSLyIPHZ2IQ==" crossorigin="anonymous" />


<div id="PictureHoverPanel" class="invisible absolute flex flex-col justify-center rounded-xl bg-gray-600 opacity-70">
  <div class="flex justify-center">
    <a class="bg-gray-800 px-2 py-1 text-white border border-red-800 font-semibold cursor-pointer">Remove</a>

  </div>

</div>

<img id="imagebox" class="w-48 h-48 rounded-xl md:w-64 md:h-64" src="/assets/photos/newyork1.jpg">

tom 3 年前

您可以添加 #PictureHoverPanel 以及事件听众。

这样地:

$(document).on("mouseover", "#imagebox, #PictureHoverPanel", function() {
  $("#PictureHoverPanel").removeClass("invisible");
})

$(document).on("mouseover", "#imagebox, #PictureHoverPanel", function() {
  $("#PictureHoverPanel").removeClass("invisible");
})

$(document).on("mouseout", "#imagebox, #PictureHoverPanel", function() {
  $("#PictureHoverPanel").addClass("invisible");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" integrity="sha512-wl80ucxCRpLkfaCnbM88y4AxnutbGk327762eM9E/rRTvY/ZGAHWMZrYUq66VQBYMIYDFpDdJAOGSLyIPHZ2IQ==" crossorigin="anonymous" />


<div id="PictureHoverPanel" class="invisible absolute flex flex-col justify-center rounded-xl bg-gray-600 opacity-70">
  <div class="flex justify-center">
    <a class="bg-gray-800 px-2 py-1 text-white border border-red-800 font-semibold cursor-pointer">Remove</a>

  </div>

</div>
<img id="imagebox" class="w-48 h-48 rounded-xl md:w-64 md:h-64" src="https://picsum.photos/seed/1/100">