仅限CSS的工具提示 - 问题与z-index？

我的目标是仅将CSS用于某些工具提示。我喜欢这里的解决方案：http://sixrevisions.com/css/css-only-tooltips/仅限CSS的工具提示 - 问题与z-index？

悬停在第一个“QWER”（第一TR的第二个TD）时，我遇到的问题是，你可以看到秒“QWER”（第二TD SECOND TR）在工具提示上。我一直在使用A元素的范围&的z-index属性，但无法使其工作。

在Firefox中正常工作。 IE7/8是我看到问题的地方。

任何想法？

<html> 
<head> 
    <style type="text/css"> 
     /* css only tooltips via http://sixrevisions.com/css/css-only-tooltips/ */ 
     a.tooltip { position: relative; color: red; } 
     a.tooltip span { margin-left: -2000px; position: absolute; left: 10px; top: 10px; width: 200px; padding: 4px; background-color: #E2E7FF; border: 1px solid #003099; text-decoration: none; color: #000; z-index: 999; } 
     a.tooltip:hover span { margin-left: 0px; } 
    </style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td>asdf</td> 
      <td><a class="tooltip" href="#">qwer<span>asdf asdf asfd asdf asfd asdf asdf asfd asdf</span></a></td> 
      <td>zxcv</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td><a class="tooltip" href="#">qwer<span>asdf asdf asfd asdf asfd asdf asdf asfd asdf</span></a></td> 
      <td>zxcv</td> 
     </tr> 
    </table> 
</body> 
</html>

来源

2010-09-07 loneboat

添加下面我自己的答案，但这么说的，我可以不接受它为我自己的2天。任何人都可以/想要随时将其标记为已回答，以防其他人想要回答此问题。 – loneboat 2010-09-07 19:34:54

解决

实测溶液这里：http://www.webmasterworld.com/forum83/8069.htm

的关键是仅应用 “的位置是：相对的;”在a.tooltip：悬停，不只是a.tooltip。工作代码：

<html> 
<head> 
    <style type="text/css"> 
     /* css only tooltips via http://sixrevisions.com/css/css-only-tooltips/ */ 
     a.tooltip:hover { position: relative; left: 0px; top: 0px; z-index: 0; color: red; } 
     a.tooltip span { 
      margin-left: -2000px; 
      position: absolute; 
      left: 5px; 
      top: 10px; 
      width: 200px; 
      padding: 4px; 
      background-color: #E2E7FF; 
      border: 1px solid #003099; 
      text-decoration: none; 
      color: #000; 
     } 
     a.tooltip:hover span { margin-left: 0px; z-index: 999; } 
    </style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td>asdf</td> 
      <td><a href="#" class="tooltip">qwer<span>asdf asdf asfd asdf asfd asdf asdf asfd asdf</span></a></td> 
      <td>zxcv</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td><a href="#" class="tooltip">qwer<span>qwer qwer qwer qwer qwer qwer qwer qwer qwer</span></a></td> 
      <td>zxcv</td> 
     </tr> 
    </table> 
</body> 
</html>

来源

2010-09-07 19:26:22 loneboat

-1

如果你包括了原有的风格，这部分在样式表中进一步下跌，它也将工作：

* html a:hover { background: transparent; }

来源

2010-09-07 19:37:01 Traingamer

您将六部分代码中的这部分留给样式 - 为我工作... – Traingamer 2010-09-14 16:27:13

仅限CSS的工具提示 - 问题与z-index？

回答

相关问题