Rumah > Artikel > hujung hadapan web > Gunakan CSS untuk menunjukkan anak panah ke bawah petua alat
Gunakan sifat atas CSS untuk menambah anak panah ke bahagian bawah petua alat.
Anda boleh cuba jalankan kod di bawah untuk menambah petua alat dengan anak panah bawah:
Demo Langsung
<!DOCTYPE html> <html> <style> .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; bottom: 100%; left: 60%; margin-left: -90px; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; margin-top: 50px; } .mytooltip .mytext:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -10px; border-width: 7px; border-style: solid; border-color: blue transparent transparent 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>
Atas ialah kandungan terperinci Gunakan CSS untuk menunjukkan anak panah ke bawah petua alat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!