Wie kann ich das Erscheinungsbild von Ankerelement-Tooltips mit CSS anpassen?

Anpassen der Darstellung von Ankerelement-Tooltips

Bei Verwendung von Anker-Tags mit dem Title-Attribut bietet der standardmäßig angezeigte Tooltip begrenzte Anpassungsoptionen. Es verfügt normalerweise über eine kleine Schriftart und einen einfachen gelben Hintergrund.

Wenn Sie eine bessere Kontrolle über die Darstellung des Tooltips wünschen, bietet CSS eine Lösung. Mithilfe des CSS-Attributausdrucks können Sie neben generierten Inhalten und Attributselektoren den Stil des Tooltips verfeinern.

Beispiel:

a {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}

a[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -100%;
  left: 0;
}

HTML:

<a href="http://www.google.com/" title="Hello world!">
  Hover over me
</a>

Mit diesem CSS, wenn Sie mit der Maus über das Ankertag fahren , wird darunter der Tooltip angezeigt, der den Inhalt des Titelattributs anzeigt. Sie können das Erscheinungsbild des Tooltips weiter anpassen, indem Sie Eigenschaften wie Schriftgröße, Farbe und Hintergrundstil ändern.

Das obige ist der detaillierte Inhalt vonWie kann ich das Erscheinungsbild von Ankerelement-Tooltips mit CSS anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!