Всплывающие подсказки только для CSS - проблема с z / index? - PullRequest
Новая
       14

Всплывающие подсказки только для CSS - проблема с z / index?

1 голос
/ 07 сентября 2010

Моя цель - использовать ТОЛЬКО CSS для некоторых подсказок. Мне нравится решение здесь: http://sixrevisions.com/css/css-only-tooltips/

Проблема, с которой я сталкиваюсь, заключается в том, что при наведении курсора на первый «qwer» (второй TD первого TR) вы можете увидеть second «qwer» (второй TD второго STR) над подсказкой. Я играл со свойствами z-index для span и элемента 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>

Ответы [ 2 ]

2 голосов
/ 07 сентября 2010

решаемые

Нашел решение здесь: http://www.webmasterworld.com/forum83/8069.htm

Ключ применял только «положение: относительное;» on.tooltip: hover, а не просто atototip. Рабочий код: 

<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>
0 голосов
/ 07 сентября 2010

Если бы вы включили эту часть оригинального стиля дальше в таблицу стилей, это также сработало бы: 

    * html a:hover { background: transparent; }
...