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:

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

Das WeChat-Applet implementiert den Wasserfallfluss, Paging, Scrollen und Laden

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

Das WeChat-Applet implementiert den Wasserfallfluss, Paging, Scrollen und Laden

Wie verstecke ich den Text im A-Tag und zeige das Bild an? Kompatibel mit 360-Grad-Rendering

So erstellen Sie einen SSH-Dienst basierend auf einem Golang-Image in Docker

React Diff-Algorithmus-Quellcodeanalyse

Implementierung einer Fuzzy-Abfrage wie %% in MySQL

So konfigurieren Sie WordPress mit Nginx

MySQL-Startfehlerproblem und Szenarioanalyse

JavaScript zum Erzielen eines Vollbild-Seiten-Scrolleffekts

Docker - Zusammenfassung von 3 Möglichkeiten zum Ändern von Container-Mount-Verzeichnissen

Vue implementiert die Verpackung und Verwendung von Komponenten zur Kontrolle der Warenanzahl

Artikel empfehlen

Beispiel für das Erreichen eines Deckeneffekts mit dem WeChat-Applet

Wie Sie eine statische IP in CentOS7 auf VirtualBox6 festlegen und was Sie dabei beachten müssen

Detailliertes Beispiel für die Verwendung von MySQL-Triggern

Detailliertes Tutorial zum Löschen von Linux-Benutzern mit dem Befehl userdel

JavaScript-Implementierung des Verifizierungscode-Falls

Linux-Installationsschritte für Jenkins und verschiedene Problemlösungen (Seitenzugriffsinitialisierungskennwort)

CSS-Hacks \9 und \0 funktionieren möglicherweise nicht zum Hacken von IE11\IE9\IE8

Einführung in die MySQL-Methode zum Löschen von Tabellendaten mit Fremdschlüsseleinschränkungen

HTML+CSS+JavaScript realisiert die Anzeige des ausgewählten Effekts nach der Mausbewegung

Informationen zur Verwendung der Vue v-on-Direktive

Benutzerzentriertes Design

Erstellen Sie ein Docker-Image mit Dockerfile

W3C Tutorial (11): W3C DOM Aktivitäten

Vue Element-ui-Tabelle realisiert Baumstrukturtabelle

Grundlegende Kenntnisse zur Verwendung von Miniprogrammen (sehr umfangreich, empfehlenswert!)