解决

Question

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

我遇到的问题是当悬停在第一个“qwer”（第一个TR的第二个TD）时，你可以看到第二个“qwer”（SECOND TR的第二个TD））在工具提示上。我一直在玩span＆amp;的z-index属性。 A元素，但无法使其工作。

在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>

Answer 1

解决

在此处找到解决方案：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>

Answer 2

如果你在样式表中进一步包含原始样式的这一部分，那么它也会起作用：

    * html a:hover { background: transparent; }

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

2 个答案:

解决