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 you hover it. one sec it hides and than it pops up again. my code is:

HTML

<hgroup> <article> <div > </div> </article> <hgroup> 

CSS;

hgroup { position: relative; height: 100%; overflow: scroll;} article { background-image:url('../ad-travelfoto.png'); width: 1000px; height: 578px; margin: 0 auto; margin-top: 100px; box-shadow: 1px 0px 7px black; background-size: cover;} article:last-child{ margin-bottom: 100px;} .filter { background-color: rgba(0,0,0,0.8); height: 578px; width: 1000px;} .filter:hover { display: none;} 

2 Answers

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

Try using opacity: 0; instead

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 }