Rumah >hujung hadapan web >tutorial css >Gunakan CSS untuk menunjukkan anak panah ke bawah petua alat
Gunakan CSS untuk menunjukkan anak panah ke bawah petua alat
- WBOYke hadapan
- 2023-09-08 21:41:06962semak imbas
Gunakan sifat atas CSS untuk menambah anak panah ke bahagian bawah petua alat.
Contoh
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!
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menentukan bentuk sudut boleh animasi menggunakan CSS?Artikel seterusnya：Bagaimana untuk menentukan bentuk sudut boleh animasi menggunakan CSS?