Pada kesempatan ini saya akan sharing-sharing sedikit mengenai Event Mouse Pada CSS. Event Mouse dalam CSS ada beberapa style yang bisa digunakan pada setiap element HTML. Saat ini saya ingin membahas beberapa event mouse yang sering dijumpai seperti event hover atau active.
Baiklah langsung saya berikan contoh seperti dibawah ini :
- Contoh yang pertama saat ada event hover, dan berikut code htmlnya:
<!-- Event Mouse Hover --> <h1>Tolong jangan dekati aku</h1>
h1:hover{text-decoration: line-through;color:blue;font-variant: small-caps;cursor: pointer;}
pada tag <h1> diatas diberikan event hover dimana style didalamnya saya berikan beberapa efek seperti text-decoration: line-through (efek coret garis tengah), color, font-variant:small-caps (huruf yang kecil menjadi capital dengan ukuran small) dan cursor, jika dijalankan pada browser akan seperti gambar diatas bagian kanan.
Selanjutnya saya akan memberikan contoh saat ada event click maka codenya seperti ini:
<!-- Event Mouse Active --> <h2>Tolong Jangan Sentuh Aku</h2>
kemudian style yang diberikan seperti berikut:
h2:active{font-style: italic;font-variant-caps: all-petite-caps;color:red;cursor: pointer;}
Jadi saat di click pada tag <h2> maka efek yang ditampilkan seperti gambar disebelah kanan, style yang didalamnya font-variant:all-petite-caps (semua huruf kecil menjadi capital).
Demikian yang bisa saya sampaikan dalam pembahasan artikel Mengenal Mouse Event Pada CSS , semoga bermanfaat dan sampai jumpa dalam kesempatan lainnya.
terima kasih