Ditulis oleh: Ditulis pada: 12/16/2019
Trik Mudah Inspect Element Hover - Pada postingan kali ini kita akan berbicara tentang modifikasi tema. Sebelumnya saya sudah membuat sebuah postingan tentang cara mudah merubah atau memodifikasi tema dengan cara inspect element.
Nah kali ini masih berhubungan dengan inspect element, namun saya akan membagikan bagaimana caranya untuk meng-inspect element hover. Karena jika kita tidak mengetahui triknya, kita akan kesulitan untuk mengetahui element hover.
Apa itu dan bagaimana contohnya?
Sebagai contoh untuk menu di blog Kompi Ajaib. Di situ ada ada elemen yang ketika elemen tersebut di-hover maka akan ada muncul background berbeda.
Jika kita tidak mengetahui CSS-nya maka kita akan kesulitan untuk mengetahui elemen mana atau CSS mana yang harus dirubah ketika misalnya Anda ingin merubah background ketika di-hover.
Lalu CSS mana yang harus dirubah?
Sekarang mari kita praktekkan, silakan aktifkan inspect element. Nah ketika kita ingin mengetahui CSS mana untuk merubah background menu ketika di-hover, tentu saja dengan cara langsung inspect maka kita akan kesulitan karena tidak akan menemukan CSS element hover.
Nah saya kasih tahu triknya, jadi misalnya kita akan merubah background warna ketika di-hover, silakan klik dulu di luar elemen yang akan kita inspect, kemudian ketika kita inspect usahakan kotak klik kanan menyentuh kotak inspect element atau kotak dev tool.
Ketika kotak klik kanan menyentuh kotak inspect, maka di sini akan muncul CSS element hover-nya, kemudian kita tinggal copy CSS-nya dan tinggal cari di edit HTML untuk CSS tersebut kemudian ganti elemen yang mau dirubah.
Cukup mudah bukan? Trik ini cukup simpel tapi jika tidak mengetahuinya maka tentu saja ini akan mempersulit Anda ketika ingin merubah sesuatu di blog Anda atau ingin merubah tampilan di blog Anda, khususnya untuk elemen yang di-hover.
Nah agar lebih jelas, silahkan tonton video berikut ini.
Semoga bermanfaat.