Heim >Web-Frontend >CSS-Tutorial >Verwenden Sie CSS, um den Pfeil auf den oberen Rand der QuickInfo zu richten
Verwenden Sie CSS, um den Pfeil auf den oberen Rand der QuickInfo zu richten
- 王林nach vorne
- 2023-09-06 10:21:021053Durchsuche
Fügen Sie mithilfe der CSS-Eigenschaft bottomeinen Pfeil oben im Tooltip hinzu.
Beispiel
Sie können versuchen, den folgenden Code auszuführen, um einen Tooltip mit einem nach oben zeigenden Pfeil hinzuzufügen:
Live-Demo
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
}
.mytooltip .mytext:after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border-width: 3px;
border-style: solid;
border-color: transparent transparent blue transparent;
}
.mytooltip:hover .mytext {
visibility: visible;
}
</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 vonVerwenden Sie CSS, um den Pfeil auf den oberen Rand der QuickInfo zu richten. 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 erstelle ich mit CSS einen Button-Hover-Animationseffekt?Nächster Artikel：Wie erstelle ich mit CSS einen Button-Hover-Animationseffekt?