Heim >Web-Frontend >CSS-Tutorial >Tooltips mittels CSS-Animation einblenden
Tooltips mittels CSS-Animation einblenden
- WBOYnach vorne
- 2023-09-10 16:13:021332Durchsuche
Um Tooltip-Text mithilfe von CSS einzublenden, können Sie versuchen, den folgenden Code auszuführen:
Beispiel
Live-Demo
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
top: -5px;
right: 110%;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
opacity: 0;
transition: opacity 1s;
}
.mytooltip {
position: relative;
display: inline-block;
margin-left: 150px;
}
.mytooltip .mytext:after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 6px;
border-style: solid;
border-color: transparent transparent transparent blue;
}
.mytooltip:hover .mytext {
visibility: visible;
opacity: 1;
}
</style>
<body>
<div class = "mytooltip">Keep mouse cursor over me
<span class = "mytext"> My Tooltip text</span>
</div>
</body>
</html>Das obige ist der detaillierte Inhalt vonTooltips mittels CSS-Animation einblenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie implementieren CSS3-Eigenschaften Animationseffekte für die Navigationsleiste auf Webseiten?Nächster Artikel：Wie implementieren CSS3-Eigenschaften Animationseffekte für die Navigationsleiste auf Webseiten?