html - 如何禁用 :hover on descendants?

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:工具提示顶部的三 Angular 形。 Google 关于“CSS 三 Angular 形伪元素”

我一直在试验纯 CSS 工具提示，它会在鼠标悬停在父元素上时弹出。你可以在 jsBin 看到工作示例。但我遇到了一个奇怪的问题 - 当我在工具提示中添加 anchor 时 - html 标记爆炸，只需取消注释此代码 <!--<a style='href='#'>Weird link</a><br>-->在 HTML Pane 中，您将看到我在说什么。然后查看标记结构 - 浏览器仅放置 .tooltip 的 HTML 内容该工具提示附加到的元素之外。

这是非常不明确的行为，我们将不胜感激。

Answer 1

首先我看到 anchor 内 anchor 的问题，这是 html 不允许的。尝试以更好的方式重新排列您的 html 标签。

其次关于奇怪的链接，它是:

<a style='href='#'>Weird link</a>

这是为什么

style='href='#'