Question

我想知道是否有人能告诉我为什么这不起作用。我一直在研究一个简单的CSS工具提示方法，但我似乎无法锁定它。在Firefox上，工具提示显示在不同的位置。在IE上，只有第一个工具提示有效。

谢谢，祝你有个美好的一天。

</html>
    </head>
        <title> CSS Tooltip Test </title>
        <style type="text/css">
            body {padding: 0px; margin: 0px; font: 80%; font-family: sans-serif;}

            div.container {padding: 10px 10px 10px 25px; }

            thead {background-color: #00f; color: #fff;}

            th { text-align: center; padding: 4px 6px 4px 6px; }

            td { text-align: center; padding: 4px 6px 4px 6px; }

            a:link {text-decoration: none;}
            a:hover {text-decoration: none;}
            a:visited {text-decoration: none;}

            a.myLink {position: relative; z-index: 24;}
            a.myLink:hover {z-index: 25;}
            a.myLink span.tooltip {display: none;}
            a.myLink:hover span.tooltip {display: block; position: absolute; overflow: visible; top: 0em; left: 8em; width: 20em; color: #fff; background-color: #000; border: solid 1px #c6d880; padding: 2px 4px 2px 4px; font-family: serif; font-size: 1em; font-weight: 700; text-align: left; z-index: 100;}

            td.myCell {position: relative; z-index: 24;}
            td.myCell:hover {z-index: 25;}
            td.myCell span.tooltip {display: none;}
            td.myCell:hover span.tooltip {display: block; position: absolute; overflow: visible; top: 0em; left: 8em; width: 20em; color: #fff; background-color: #000; border: solid 1px #c6d880; padding: 2px 4px 2px 4px; font-family: serif; font-size: 1em; font-weight: 700; text-align: left; z-index: 100;}

            button.myButton {position: relative; z-index: 24;}
            button.myButton:hover {z-index: 25;}
            button.myButton span.tooltip {display: none;}
            button.myButton:hover span.tooltip {display: block; position: absolute; overflow: visible; top: 0em; left: 8em; width: 20em; color: #fff; background-color: #000; border: solid 1px #c6d880; padding: 2px 4px 2px 4px; font-family: serif; font-size: 1em; font-weight: 700; text-align: left; z-index: 100;}
        </style>
    </head>
    <body>
        <div class="container">
            <table border="1">
                <thead>
                    <tr><th> CSS Tooltip Test Table </th></tr>
                </thead>
                <tbody>
                    <tr><td><a class="myLink" href="http://www.google.com/" target="_blank"><span class="tooltip">this is a tooltip for cell 1</span>Go To Google</a></td></tr>
                    <tr><td class="myCell"><span class="tooltip">this is a tooltip for cell 2</span>This Is Cell 2</td></tr>
                    <tr><td><button class="myButton" type="submit"><span class="tooltip">this is a tooltip for cell 3</span>A Clicky Button</button></td></tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Answer 1

你可以用动画制作更简单的东西：

<html>
<head>
    <style>
        .animate {
            -moz-transition: all 0.3s ease-out;  /*FF3.7+*/
            -o-transition: all 0.3s ease-out;  /*Opera 10.5*/
            -webkit-transition: all 0.3s ease-out;  /*Saf3.2+, Chrome*/
            transition: all 0.3s ease-out;
        }
        /* Boton */
        .boton{position:relative;width:120px;height:100px;margin-top:60px;}

        /* Tooltip initial statement */
        .tooltip{position:absolute;opacity:0;top:0px;right:0px;background-color:black;color:white;padding:4px;}

        /*Hover Action*/
        .boton:hover .tooltip{opacity:0.9;top:-50px;right:0px;}
    </style>
    </head>
<body>
<div class="boton">Here is part of your text
    <div class="tooltip animate">And here the tooltip content.</div>
</div>
</body>
</html>

你可以测试它。

需要有关简单CSS工具提示的建议

1 个答案: