Verwenden Sie CSS-Inhaltsattribute, um den Mouseover-Prompt-Effekt (Tooltip) zu erzielen

Warum erzielen wir diesen Effekt? Tatsächlich wird dieser Effekt auch von der Titelaufforderung abgeleitet, aber weil der ursprüngliche Effekt hässlich ist, gibt es viele abgeleitete Plug-Ins wie dieses, wie z. B. Tooltips von jquery-ui, Tooltips von Bootstrap usw. Es gibt viele Plug-In-Bibliotheken.

Manchmal brauchen wir keine so große Plugin-Bibliothek. Tatsächlich müssen wir nur an ein oder zwei Stellen einige Tooltips erstellen, sodass wir die CSS-Inhaltseigenschaft mit den Pseudoelementen :before und :after verwenden können, um generierten Inhalt einzufügen.

Überprüfen Sie den Effekt wie folgt

Der HTML-Code lautet wie folgt

<a class="dui-tips" data-tooltip="Ich bin ein 3cbest.com-Tipp">w3cbest.com</a>

„data-“ ist ein benutzerdefiniertes Attribut, wie beispielsweise die benutzerdefinierte Eingabeaufforderung data-tooltip="Ich bin eine 3cbest.com-Eingabeaufforderung", und verwenden Sie das Inhaltsattribut, um die benutzerdefinierte Eingabeaufforderung in Verbindung mit „vorher“ und „nachher“ aufzurufen, content: attr(data-tooltip);

content: attr ist leicht zu verstehen. Wenn Sie jqs .attr() kennen, wissen Sie, was es bedeutet. In diesem Beispiel wird content: attr verwendet, um den Wert im Daten-Tooltip abzurufen.

CSS Code

.dui-tipps {
Position: relativ;
Anzeige: Inline-Block;
Cursor: Zeiger;
}
 
.dui-tips[data-tooltip]:nachher,
.dui-tips[data-tooltip]:vor {
Sichtbarkeit: versteckt;
Position: absolut;
oben: 50 %;
links: 100 %;
Übergang: alle 0,3 s;
}
 
.dui-tips[data-tooltip]:nach {
 
Inhalt: Attr (Daten-Tooltip);
transformieren: übersetzen(-5px, -50%);
Leerzeichen: vor;
Polsterung: 5px 10px;
Hintergrundfarbe: rgba(0, 0, 0, 0);
Farbe: rgba(255, 255, 255, 0);
}
 
.dui-tips[data-tooltip]:vor {
Inhalt: '';
Höhe: 0;
Breite: 0;
transformieren: übersetzen(-10px, -50%);
Rahmenbreite: 5px 5px 5px 0;
Rahmenstil: durchgezogen;
Rahmenfarbe: transparent rgba(0, 0, 0, 0) transparent transparent;
}
.dui-tips:hover:nachher,.dui-tips:hover:vorher {
Übergang: alle 0,3 s;
Sichtbarkeit: sichtbar;
 
}
.dui-tips:hover:nach {
Farbe: rgba(255, 255, 255, 1);
Hintergrundfarbe: rgba(0, 0, 0, 0,8);
transformieren: übersetzen(5px, -50%);
}
 
.dui-tips:hover:before {
Rahmenfarbe: transparent rgba(0, 0, 0, 0,8) transparent transparent;
transformieren: übersetzen(0px, -50%);
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.