html - :hover on子孫を無効にする方法は?

Question

リンク:
http://jsbin.com/EFAlace/3/edit?html,css,output

HTML:

 <a href='#' class='tooltip-parent'>Hover over me!
    <span class='tooltip-container'>
    <span class='tooltip'>
      <a style='href='#'>Weird link</a><br>
      One<br>
      Two<br> 
      Three<br>
      Four<br>
    </span>
    </span>

</a>

.tooltip-container「リセット」ツールチップ位置のために、絶対配置のために追加されました。

CSS (少ない):

.tooltip-container {
position: absolute;
}

a:hover {
  background-color: grey;
}

.tooltip-parent {
  display: inline-block;
  .tooltip {
    width: 150px;
    display: none;
    position:relative;

    border:1px solid blue;
    &:before, &:after {
      content: '';
      top: -20px;
      left: 20%;
      position: absolute;

      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid white;
      margin-left: -20px;
    }   
    &:before {
      border-left: 23px solid transparent;
    border-right: 23px solid transparent;
    border-bottom: 23px solid;
      margin-left: -23px;

    border-bottom-color: inherit; /* Can't be included in the shorthand to work */
    top: -23px;      
    }

  }
  &:hover .tooltip {
    padding: 10px;
    display: inline-block;  
    top: 20px;  
  }
}
ul {
  list-style:none;
  margin: 0; padding:0;
  li {margin: 0; padding:0;}
}

:before物事はツールチップの上部に:after:ある三角形です。「CSS トライアングル疑似要素」に関する Google

親要素にカーソルを合わせるとポップアップする CSS のみのツールチップを試しています。jsBin で実際の例を見ることができます。しかし、私は奇妙な問題に遭遇しました - ツールチップ内にアンカーを追加すると、html マークアップが吹き飛ばされ<!--<a style='href='#'>Weird link</a><br>-->ます。HTML ペインでこのコードのコメントを外すだけで、私が話していることがわかります。.tooltip次に、マークアップ構造を見てください。ブラウザは、そのツールチップが添付されている要素の外側に HTML コンテンツを配置するだけです。

それはかなり不明確な動作です。どんな考えでも大歓迎です。