title: Popover on hover always show up
body: <p>I have the following CSS code, which is supposed to produce a popover when I hover over a button.</p>
  
  <pre><code>.qs {
    background-color: #02bdda;
    border-radius: 16px;
    color: #e3fbff;
    cursor: default;
    display: inline-block;
    font-family: 'Helvetica',sans-serif;
    font-size: 18px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    position: relative;
    text-align: center;
    width: 200px;
    margin-top: 25px;
  
    .popover {
      background-color: rgba(0,0,0,0.85);
      border-radius: 5px;
      bottom: 42px;
      box-shadow: 0 0 5px rgba(0,0,0,0.4);
      color: #fff;
      font-size: 12px;
      font-family: 'Helvetica',sans-serif;
      padding: 7px 10px;
      position: absolute;
      width: 200px;
      z-index: 4;
      text-align: left;
      line-height: 1em;
      display: block;
      margin: auto;
  
  
      &amp;:before {
          border-top: 7px solid rgba(0,0,0,0.85);
          border-right: 7px solid transparent;
          border-left: 7px solid transparent;
          bottom: -7px;
          content: '';
          display: block;
          left: 50%;
          margin-left: -7px;
          position: absolute;
        }
    }
  
    &amp;:hover {
        .popover {
          display: block;
          -webkit-animation: fade-in .3s linear 1, move-up .3s linear 1;
          -moz-animation: fade-in .3s linear 1, move-up .3s linear 1;
          -ms-animation: fade-in .3s linear 1, move-up .3s linear 1;
        }
      }
  }
  
  @-webkit-keyframes fade-in {
      from   { opacity: 0; }
      to { opacity: 1; }
  }
  @-moz-keyframes fade-in {
      from   { opacity: 0; }
      to { opacity: 1; }
  }
  @-ms-keyframes fade-in {
      from   { opacity: 0; }
      to { opacity: 1; }
  }
  @-webkit-keyframes move-up {
      from   { bottom: 30px; }
      to { bottom: 42px; }
  }
  @-moz-keyframes move-up {
      from   { bottom: 30px; }
      to { bottom: 42px; }
  }
  @-ms-keyframes move-up {
      from   { bottom: 30px; }
      to { bottom: 42px; }
  }
  </code></pre>
  
  <p>However the popover shows up when the page loads instead of on hover. I guess I am missing something but I can't figure out the problem. The code was originally found at <a href="http://codepen.io/derekpcollins/pen/JCLhG/" rel="nofollow">http://codepen.io/derekpcollins/pen/JCLhG/</a></p>