title: Hover div flickers when rolling mouse over
body: <p>I have a div that appears when hovering over another div.</p>
  <p>However when I try to move the mouse over the div that appears it flickers.
  I understand this is happening because of my CSS, but can not figure out what I should do to rectify.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hoverbase {
    width: 300px;
    height: 300px;
    position: relative;
  }
  
  .hovertop {
    height: 200px;
    width: 200px;
    border: 2px solid red;
    background-color: white;
    position: absolute;
    top: 50px;
    left: 50px;
    margin: auto;
    visibility: hidden;
  }
  
  .hoverbase a:hover+.hovertop {
    visibility: visible;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='hoverbase'&gt;
    &lt;a href=http://www.google.com.au&gt;
      &lt;img src='https://fakeimg.pl/300x300/949598/888888/' /&gt;&lt;/a&gt;
    &lt;div class='hovertop'&gt;
      &lt;a href=http://google.com.au&gt;
        &lt;h2&gt;Project HA&lt;/h2&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="http://jsfiddle.net/jmoore91/gf4fwyf2/" rel="nofollow noreferrer">View on jsFiddle</a></p>