3 Ways to Add Hover Effects Into Your HTML Elements

hover effects

Hover effects can make your site more alive and interactive. User will give more attention to the element that has hover effects since it is very fancy to look at the element performs some dynamic change when your cursor in the top of it.
In this tutorial we’re gonna show you how to add hover effects in your HTML elements using 3 different ways.

1. Hover Effects CSS Way

It used to be JavaScript that was required to do really interesting effects but these days CSS has come and capable of doing a ton of cool stuff. To add hover effects in your Html elements, simply use :hover in corresponding elements in our CSS file.

Let’s say we have first class in our Html elements.

All we need to do in our Css styling is

2. Jquery Way : hover() method

The hover() method needs two functions to run when the mouse pointer hovers over the selected elements.
This method triggers both the mouseenter and mouseleave events.

If only one function is specified, it will be run for both the mouseenter and mouseleave events.

Let’s add hover in our next Html elements, second class

In the head of Html we need to specify what method will be used to give a hover effects.

3. Jquery Way : mouseover and mouseout events

Although Jquery provides us hover() method. Sometime it can be a trouble when we dynamically add elements during running time. The dynamically added elements will not have hover effects not like other elements that are created in design code (we will explain it later in the upcoming tutorials).
Here we use mouseover and mouseout events that are triggered inside on() method.

Once more we add hover effects in our html elements.

And here’s our on method

4. Full Code

5. Demo

As usual, you can try the live demo

Live Demo
Facebook Comments

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

Halo, perkenalkan saya Agung Setiawan.
Seorang Software Engineer di BukaLapak, penulis buku, blogger, gunpla builder, tech educator.
Simak pemikiran saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

2 thoughts on “3 Ways to Add Hover Effects Into Your HTML Elements

Leave a Reply

Your email address will not be published. Required fields are marked *