【Empfohlenes Tutorial: CSS-Video-Tutorial】
Reines CSS zum Implementieren von Tooltips, CSS ändert den Titelstil des HTML-Tags [Der Autor wird einige Randbedingungen aktualisieren, wenn ich Zeit habe. Der aktuelle Stil ist in extremen Fällen problematisch. Bitte kopieren Sie den Code nicht direkt in die Online-Umgebung. Dies ist nur eine kleine, vom Autor geschriebene Demo.]
Der folgende Code ist direkt verfügbar Der Tootip-Stil kann durch das Debuggen selbst angepasst werden.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
display: flex;
justify-content: center;
align-items: center;
}
span {
position: relative;
margin: 50px auto;
border: 1px solid;
}
span[aria-label]:hover:after {
content: attr(aria-label);
position: absolute;
bottom: -30px;
left: 0;
border: 1px solid;
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<span aria-label="我是tooltip">我是主体内容啊</span>
</div>
</body>
</html>Programmierunterricht
! !Das obige ist der detaillierte Inhalt vonWie ändere ich den Titelstil eines HTML-Tags mit CSS? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
