title: display none on hover don't work properly css
body: <p>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:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;hgroup&gt;
      &lt;article&gt;
          &lt;div class="filter" &gt;
  
          &lt;/div&gt;
      &lt;/article&gt;
  &lt;hgroup&gt;
  </code></pre>
  
  <p>CSS;</p>
  
  <pre><code>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;}
  </code></pre>