文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS专用工具提示-问题w/z-索引？

问CSS专用工具提示-问题w/z-索引？
EN

Stack Overflow用户

提问于 2010-09-07 18:20:14

回答 2查看 7.1K关注 0票数 1

我的目标是只在一些工具提示中使用CSS。我喜欢这里的解决方案：http://sixrevisions.com/css/css-only-tooltips/

我遇到的问题是，当在第一个"qwer“(第一个TR的第二个TD )上盘旋时，您可以在工具提示上看到第二个"qwer”(第二个TR的第二个TD )。我一直在使用span的z索引属性&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>

tooltip

html

css

browser

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-09-07 19:26:22

解出

在这里找到了解决方案：http://www.webmasterworld.com/forum83/8069.htm

关键是只在a.tooltip:hover上应用“立场:相对；”，而不仅仅是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>

票数 3

Stack Overflow用户

发布于 2010-09-07 19:37:01

如果您将原始样式的这一部分更深入地包含在样式表中，它也会奏效：

    * html a:hover { background: transparent; }

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/3661450

复制

相似问题

问CSS专用工具提示-问题w/z-索引？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS专用工具提示-问题w/z-索引？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS专用工具提示-问题w/z-索引？
EN