css-Tooltip-Formatierungsproblem mit Unterstreichungen in einem Tag erstellen

Question

Ich versuche, einen reinen css-Tooltip zu erstellen. Ich habe den Testcode hier: http://jsfiddle.net/RBdn4/

Das einzige Problem dabei ist, dass in Chrome der Text in der QuickInfo unterstrichen ist, obwohl die text-decoration: none; Zeile in der css.

Haben Sie einen Vorschlag, wie man das abstellen kann? Der Link sollte unterstrichen werden, aber die .tooltip Text sollte nicht.

Answer 1

Chrome wendet den Link der text-decoration zum <div> denn es ist ein Kind des <a> .

Fügen Sie ein Wrapper-Element um das <a> und machen den Tooltip <div> ein Geschwisterkind anstelle eines Kindes des <a> . Zeigt den Tooltip an, wenn der Wrapper :hover Hrsg.

Oh, und sorgen Sie dafür, dass das CSS einen Sinn ergibt!

HTML

<span class="wrap">
    <a href="#">this is text</a>
    <div class="tooltip"> this is a tooltip</div>
</span>

CSS

.tooltip {
    color: #000000;
    display: none;
    left: 50px;
    padding: 10px;
    position: absolute;
    top: 40px;
    width: 250px;    
    text-decoration: none;
    z-index: 100;
}

span.wrap:hover .tooltip {
    display: block;
}

Demo: http://jsfiddle.net/mattball/u66GT/

Answer 2

Fixiert . Sie können nicht außer Kraft setzen text-decoration vom Kind. Legen Sie auch keine <div> s in <a> s, wie Matt Ball weist darauf hin.

Answer 3

Ich war nicht in der Lage, die Unterstreichung in Chrome zu verhindern, während die Elemente verschachtelt waren, aber ich kann das Problem lösen, indem ich sie stattdessen zu Geschwistern mache.

Entfernen Sie einfach die <div> aus dem Inneren des <a> Tag, und setzen Sie ihn stattdessen daneben, etwa so:

<a href="#">this is text</a>
<div class="tooltip"> this is a tooltip</div>

und verwenden Sie die CSS + Selektor (benachbarte Geschwister), um die schwebende QuickInfo auszuwählen, und nicht den untergeordneten Selektor.

.tooltip{
    display: none;
}

a:hover+.tooltip{
    color: #000000;
    display: block;
    left: 50px;
    padding: 10px;
    position: absolute;
    top: 40px;
    width: 250px;    
    text-decoration: none;
    z-index: 100;
}

Die einzige Änderung im CSS gegenüber dem Original ist die Umwandlung des Leerzeichens in ein Pluszeichen.

Beachten Sie die + Selektor funktioniert nicht im IE6. Hoffentlich haben Sie nicht vor, diesen veralteten Browser zu unterstützen, oder?