[英]Div mouseenter and mouseleave
I have two Divs (CSS is TailwindCss
)我有两个 Div(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">
The problem is as I enter #imagebox
every mouse move triggers the mouseout
event resulting in a really quick blink.问题是当我输入
#imagebox
,每次鼠标移动都会触发mouseout
事件,从而导致快速闪烁。 How can I make sure that the invisible
class will not be added unless the cursor is fully out of imagebox
如何确保不添加
invisible
的 class 除非 cursor 完全超出imagebox
$(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">
You can add #PictureHoverPanel
as well to the event listener.您也可以将
#PictureHoverPanel
添加到事件侦听器中。
Like this:像这样:
$(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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.