html - 工具提示 CSS 未显示

Question

到目前为止，我的 CSS 代码如下所示:

  .tooltip{display:inline;position:relative}
  .tooltip:hover{text-decoration:none}
  .tooltip:hover:after{
   background:#111;
   background:rgba(0,0,0,.8);
   border-radius:5px;
   bottom:18px;
   color:#000;
   content:attr(title);
   display:block;
   left:50%;
   padding:5px 15px;
   position:absolute;
   white-space:nowrap;
   z-index:98
  }
  .tooltip:hover:before{
    border:solid;
    border-color:#111 transparent;
    border-width:6px 6px 0 6px;
    bottom:12px;
    content:"";
    display:block;
    left:75%;
    position:absolute;
    z-index:99
   }

我的 HTML 代码如下所示:

<p style="color:black;"><a href="#" title="Sample tooltip" class="tooltip">Link</a><p>

出于某种原因，什么都没有出现。这与我的文本颜色或 CSS 代码的结构方式有关吗？

Answer 1

http://jsfiddle.net/NYmTL/

这个 fiddle 似乎很适合您的代码。我将 color: #000 更改为 #FFF。黑色上的黑色不是很明显。