title: Hover effect on links doesnt work
body: <p>***EDITED:</p>
  
  <p>"Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." – Marc B, Márton Molnár, LinkinTED, Anonymous, Joshua Moore"</p>
  
  <p>The code is provided; the problem is specified; theres a clear problem... how the heck do i need to describe it more than i did, if i don't understand what's the problem. </p>
  
  <p>***END</p>
  
  <p>Please help! </p>
  
  <p>Two examples: </p>
  
  <p>1) 
  css:</p>
  
  <pre><code>        .link-with-popup {
          position: relative;
          z-index: 100;
          margin-bottom: 10px;
          font: normal 11px tahoma;
      }
  
      .link-with-popup:hover {
          z-index: 200;
      }
  
      .link {
          background: #E0EAF1;
          padding: 10px 0;
          width: 100px;
          text-align: center;
          cursor: pointer;
      }
  
      .link:hover {
          background: #c4dae9;
      }
      .aa {
          color:#FF00FF;
      }
      /* The problem */
      .link:hover + .popup {
          display: block;
      }
      /* /The problem */
      .popup {
          position: absolute;
          top: 0;
          left: 0;
          width: 400px;
          bottom: 0;
          display: none;
      }
  
      .popup:hover {
          display: block;
      }
  
      .popup .box {
          position: absolute;
          top: 0;
          left: 130px;
          right: 0;
          bottom: 0;
          background: #505050;
          color: #fff;
          padding: 10px 20px;
      }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/densssky/s0cg4pvu/" rel="nofollow">jsfiddle</a></p>
  
  <p>2) 
  css:</p>
  
  <pre><code>    .link-with-popup {
          position: relative;
          z-index: 100;
          margin-bottom: 10px;
          font: normal 11px tahoma;
      }
  
      .link-with-popup:hover {
          z-index: 200;
      }
  
      .link {
          background: #E0EAF1;
          padding: 10px 0;
          width: 100px;
          text-align: center;
          cursor: pointer;
      }
  
      .link:hover {
          background: #c4dae9;
      }
      .aa {
          color:#FF00FF;
      }
      /* The problem */
      .aa:hover + .popup {
          display: block;
      }
      /* /The problem */
      .popup {
          position: absolute;
          top: 0;
          left: 0;
          width: 400px;
          bottom: 0;
          display: none;
      }
  
      .popup:hover {
          display: block;
      }
  
      .popup .box {
          position: absolute;
          top: 0;
          left: 130px;
          right: 0;
          bottom: 0;
          background: #505050;
          color: #fff;
          padding: 10px 20px;
      }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/densssky/4vkLdLh3/" rel="nofollow">jsfiddle-2</a></p>
  
  <p>In the first one, the hover effect is working fine, but in the second it's not. I can't understand why. It should effect on links as well...</p>
  
  <p>Please help</p>