0

链接： 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 三角形伪元素”

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

那是非常不清楚的行为，任何想法将不胜感激。

4

1 回答 1

0

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

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

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

为什么

style='href='#'
于 2013-09-28T19:15:51.270 回答