So passen Sie mit CSS einen schöneren Link-Prompt-Effekt an

So passen Sie mit CSS einen schöneren Link-Prompt-Effekt an
Vorschlag: Das möglichst häufige handschriftliche Schreiben von Code kann die Lerneffizienz und -tiefe effektiv verbessern.
Standardmäßig können Sie das Titelattribut des <a>-Tags verwenden, um einen Link-Prompt-Effekt zu erzielen. Zum Beispiel

Code kopieren
Der Code lautet wie folgt:

Code anzeigen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<Kopf>
<title>Ameisenstamm</title>
</Kopf>
<Text>
<a href="http://www.softwhy.com" title="Ameisenstamm">Ameisenstamm</a>
</body>
</html>

Obwohl der obige Code den Link-Prompt-Effekt erzielen kann, kann er den tatsächlichen Anforderungen oft nicht gerecht werden. Möglicherweise müssen Sie den Link-Prompt-Effekt anpassen, damit er schöner ist oder zur Seite passt. Das Codebeispiel lautet wie folgt

Code kopieren
Der Code lautet wie folgt:

Code anzeigen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<Kopf>
<title>Ameisenstamm</title>
<style type="text/css">
ul
{
Listenstil: keiner;
Schriftgröße: 14px;
}
li
{
Breite: 100px;
Höhe: 30px;
Zeilenhöhe: 30px;
schweben: links;
Textausrichtung: zentriert;
Position: relativ;
Rand: 1px durchgehend rot;
}
Spanne
{
Anzeige: keine;
}
a:Link,a:besucht
{
Textdekoration: keine;
}
a:schweben .tishi
{
Anzeige:Block;
Breite: 100px;
Höhe: 30px;
Hintergrundfarbe: #6C9;
Zeilenhöhe: 30px;
Textausrichtung: zentriert;
Position: absolut;
links: 80px;
oben: 40px;
Farbe: #FFFFFF;
}
</Stil>
</Kopf>
<Text>
<ul>
<li>
<a href="#" class="mylink">DIV+CSS<span class="tishi">DIV+CSS</span></a>
</li>
<li>
<a href="#" class="mylink">jQuery<span class="tishi">jQuery</span></a>
</li>
<li>
<a href="#" class="mylink">JS<span class="tishi">JS</span></a>
</li>
<li>
<a href="#" class="mylink">HTML<span class="tishi">HTML</span></a>
</li>
<div Stil="clear:both"></div>
</ul>
</body>
</html>

Der obige Code erzielt erfolgreich den gewünschten Effekt. Die Hauptmethode besteht darin, die Hyperlink-Pseudoklasse zum Anzeigen des Span-Elements zu verwenden

<<:  Implementieren Sie eine einfache Suchmaschine auf Basis von MySQL

>>:  idea verwendet Docker-Plugin, um automatisierte Bereitstellung mit einem Klick zu erreichen

Artikel empfehlen

Was ist TypeScript?

Inhaltsverzeichnis 1. JavaScript-Probleme 2. Vort...

Der Unterschied zwischen gespeicherten Prozeduren und Transaktionen in MySQL-Datenbanken

Transaktionen stellen die Atomarität mehrerer SQL...

Layui implementiert Beispielcode für Abfragen mit mehreren Bedingungen

Ich habe vor kurzem ein Dateisystem erstellt und ...

Wir zeigen Ihnen einen Trick, um einen Textvergleich unter Linux durchzuführen

Vorwort Während des Schreibens des Codes werden w...

So konfigurieren Sie die PDFLatex-Umgebung in Docker

Technischer Hintergrund Latex ist ein unverzichtb...

Schritte zum Bereitstellen eines Spring Boot-Projekts mit Docker

Inhaltsverzeichnis Erstellen Sie ein einfaches Sp...

Installieren Sie Docker für Windows unter Windows 10 Home Edition

0. Hintergrund Hardware: Xiaomi Notebook Air 13/I...

Detaillierte Erläuterung des Ausführungsplans, Beispiel für einen Befehl in MySQL

Vorwort Der Befehl „Explain“ ist die primäre Mögl...

So implementieren Sie Linux Deepin, um redundante Kernel zu löschen

Im vorherigen Artikel wurde beschrieben, wie man ...

Diskussion über die Möglichkeit zum Öffnen von Website-Hyperlinks

Ein neues Fenster wird geöffnet. Vorteile: Wenn d...

Tutorial zur Konfiguration des Nginx/Httpd-Reverseproxys für Tomcat

Im vorherigen Blog erfuhren wir die Verwendung un...

MySQL 8.0.19 unterstützt die Sperrung eines Kontos nach dreimaliger Eingabe eines falschen Passworts (Beispiel)

MySQL 8.0.19 unterstützt die Sperrung des Kontos ...

CSS3 verwendet Transformationsverformung in Kombination mit Ereignissen, um die fächerförmige Navigation zu vervollständigen

Weil ich in diesem Fall das Wort Übergang falsch ...

Tabelle der durch hasLayout verursachten CSS-Fehler

Der IE hat schon seit längerem Probleme. Als alle ...

Über das Problem der dynamischen Spleißen der SRC-Bildadresse von img in Vue

Werfen wir einen Blick auf das dynamische Spleiße...