Hallo teman-teman, kali ini kita akan belajar bagaimana cara membuat hover panah dengan CSS. Bagi kalian yang belum tau hover itu apa adalah terjadinya perubahan pada objek yang kalian sorot dengan kursor. Jadi misalnya terdapat sebuah menu pada website kalian, pada saat mouse mengarah pada menu tersebut terjadi perubahan warna pada menu. Seperti itu dasar dari hover yang ada pada CSS. Pada artikel ini kita akan mencoba membuat variasi hover dengan anak panah kecil pada menu yang akan di hover. Oke kita mulai saja prakteknya, sekarang kalian bisa ikuti contoh code dibawah ini.
panah.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<html> <head> <meta charset="UTF-8"> <title>Hover panah</title> <style> .box{ height: 100px; width: 200px; background: gold; position: fixed; line-height: 50px; text-align: center; } .panah{ display: none; width: 0px; height: 0px; border-top: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid gold; position: absolute; left: 100%; top:50%; margin-top: -10px; } .box:hover .panah{ display: block; } </style> </head> <body> <div class="box"> <h1>Menu</h1> <div class="panah"></div> </div> </body> </html> |
Save dan lihat hasilnya pada browser kalian. Jika berhasil maka tampilanya akan seperti link dibawah ini.
Mudah bukan ?
Oke sekian pembahasan mengenai bagaimana cara membuat hover panah dengan CSS. Semoga bermanfaat.