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

Zusammenfassung der Berechtigungsprobleme bei gespeicherten MySQL-Prozeduren

Ja, gespeicherte MySQL-Prozeduren scheinen sehr s...

Detaillierte Erklärung des Middleman-Modus von Angular-Komponenten

Inhaltsverzeichnis 1. Mittelsmann-Modell 2. Beisp...

Detailliertes Installationstutorial zur dekomprimierten Version von mysql5.7.19 (mit rein geknackter chinesischer Version von SQLYog)

Die Version Mysql5.7.19 ist eine neue Version, di...

Zusammenfassung der Linux-Benutzergruppen und -Berechtigungen

Benutzergruppen Unter Linux muss jeder Benutzer e...

Installation und Konfiguration des automatischen Mount-Dienstes AutoFs im Linux-System

Inhaltsverzeichnis Vorwort 1. Installieren Sie da...

Detaillierte Erklärung zur Verwendung von Echarts-Maps in Angular

Inhaltsverzeichnis Initialisierung von Echart App...

Analyse des kumulativen Aggregationsprinzips von MySQL und Anwendungsbeispiele

Dieser Artikel veranschaulicht anhand von Beispie...

Analyse der Vor- und Nachteile von gespeicherten MySQL-Prozeduren

MySQL Version 5.0 begann, gespeicherte Prozeduren...

Docker verwendet das Tool nsenter, um in den Container zu gelangen

Bei der Verwendung von Docker-Containern ist es b...

Eine kurze Diskussion über 12 klassische Probleme in Angular

Inhaltsverzeichnis 1. Erklären Sie bitte, was die...

Detaillierte Erklärung der Docker-Nutzung unter CentOS8

1. Installation von Docker unter CentOS8 curl htt...

Vue echarts realisiert die dynamische Anzeige von Balkendiagrammen

In diesem Artikel wird der spezifische Code von V...

Warum brauchen wir Map, wenn wir in JavaScript bereits Object haben?

Inhaltsverzeichnis 1. Behandeln Sie Objekte nicht...

Docker installiert MySQL und löst das chinesische verstümmelte Problem

Inhaltsverzeichnis 1. Ziehen Sie das MySQL-Image ...

Detaillierte Erklärung der jQuery-Kettenaufrufe

Inhaltsverzeichnis Kettenanrufe Ein kleiner Koffe...