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（LESS）：

.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:内容为三角形。 Google关于“CSS三角伪元素”

我一直在尝试使用仅限CSS的工具提示，它会在悬停在父元素上时弹出。你可以在jsBin上看到工作示例。但是我遇到了一个奇怪的问题 - 当我在工具提示中添加锚点时 - html标记爆炸，只需在HTML窗格中取消注释此代码，您就会看到我正在谈论的内容。然后在标记结构中看到 - 浏览器只是将.tooltip的HTML内容放在该工具提示所附加的元素之外。

这种行为很不明确，任何想法都会受到赞赏。

Answer 1

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

其次关于奇怪的链接，即：

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

为什么是

style='href='#'

如何禁用：悬停在后代上？

1 个答案: