Display None On Hover Don't Work Properly Css

i have a div(1) on top of another div(2) and i want that div(2) hide on hover. i do that with display: block and on hover display: none. This won't work properly it flickers if yo

Solution 1:

That's happening because once it displays to none, you're not technically hovered on that element anymore.

Try using opacity: 0; instead

Solution 2:

In my opinion when you set opacity:0 then it's still there, so you cannot click anything under a div that is invisible. If you need it this .filter to be really gone, in your case, I suggest you to use:

.filter:hover {
 display: none;
}
article:hover .filter {
 display:none
}