CSS-only-tooltips - problem w/z-index?

Mein Ziel ist es, mit CSS NUR für einige tooltips. Ich mag hier die Lösung: http://sixrevisions.com/css/css-only-tooltips/

Das problem das ich habe ist, wenn die Maus über das erste "qwer" (der zweite TD der ersten TR), können Sie sehen, die zweiten "qwer" (zweite TD von der ZWEITEN TR) über die QuickInfo. Ich Spiele schon mit dem z-index-Eigenschaften der Spannweite & das Eine element, aber kann nicht ankommen es zu wirken.

Funktioniert gut in Firefox. IE7/8 ist, wo ich sehe das problem.

Irgendwelche Ideen?

<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>
Noch meine eigene Antwort unten, aber SO sagen kann ich nicht akzeptieren, es als mein eigenes für 2 Tage. Wer kann/will, fühlen Sie sich frei, um Sie zu markieren, als beantwortet, falls jemand anderes will eine Antwort auf diese Frage.

InformationsquelleAutor loneboat | 2010-09-07

  1. 2

    GELÖST

    Hier die Lösung gefunden: http://www.webmasterworld.com/forum83/8069.htm

    Dem Schlüssel war nur die Anwendung der "position: relative;" auf.tooltip:hover, nicht nur eine.tooltip . Arbeiten code:

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

    InformationsquelleAutor loneboat

  2. -1

    Wenn Sie möchten, enthalten diese ein Teil der ursprünglichen Stil weiter unten in deinem stylesheet, es würde auch gearbeitet haben:

        * html a:hover { background: transparent; }
    Sie verließ diesen Teil des sixrevisions-code aus der Stile - für mich gearbeitet...

    InformationsquelleAutor Traingamer

Schreibe einen Kommentar