javascript hover effect

Javascript Hover Effect and how to apply it

Knowing how to use JavaScript hover effect is always a plus, The hover effect is one interesting design to always incorporate In your web project, be it for a client or a personal project. its also a common way of using the project to test your JavaScript knowledge at the beginners stage of learning JavaScript.

for the purpose of this lesson, we are going to learn how to use the javascript hover effect and also use it to make changes to a button, if you want learn just how to change the button color, click here. changes like we all know,

Whenever a user hover on a button, they usually expect a change to occur, the change could be;

  1. A change in the text color of the button.
  2. A change in the background color of the button.
  3. button text content itself.

To change the button color on hover using css is quite straightforward , in fact, with two lines of code you can apply that effect.

just to recall, the css code to apply hover effect to change a button color is;

button: hover{

color: red;

background-color: black;

}

no javascript hover effect
button without javascript hover effect

using JavaScript to change button color on hover

Let us proceeds to using JavaScript. One thing to note here is that, implementing the hover effect using JavaScript is not the same as implementing it using css, but then, it is not a reason to panic as the code below will guide you on how to change a button color using JavaScript.

   Supposing you have your html code as

<body>

 <button id=”btn”>submit</button>

</body>

Just to make our button visible, let’s add some CSS

#btn {

  color: red;

  font-weight: 400;

  background-color: black;

  padding: 6px 10px;

  outline: none;

  border: 2px solid orange;

  transition: all 1s linear;

}

And the class we are going to add using javacsript is;

.hover {

 color: #887314;  

background-color: palegoldenrod;  

font-weight: 500;  

border: 2px solid orange;

transition: all 1s linear;

}

To accomplish this, we need to use an event, and I pretty sure you know there are various events in JavaScript such as click, submit, load, mouseout, mouseover and lots more. To see other JavaScript event types click here .

But those events are not our focus, in fact; our focus is mouseover event because that is the event that is going to help us accomplish our goal. And here is the JavaScript code to change our button color and and also change the button text.

 <script>

//we are targeting the button in our html document using its ID

 const btn = document.getElementById(“btn”)

//we are adding the mouseover event to the button

btn.addEventListener(“mouseover”,add)

function add(){

        btn.classList.add(“hover”);

//changing the text content

  btn.textContent = “hovered”;

}

    </script>

The main point again is that, applying hover effect in javascript requires using the mouseover event after targeting the element and the specifying the change should occur on hover.

While this works, there is a little problem, you would notice that, once you add the class using the mouseover event, the class remains on the button, this means the button color do not change back to its default. And so, to change this, we have to use the mouseout event to reverse it back to its default styling.

 And here is the mouseout event to return the button styling to its default.

btn.addEventListener(“mouseout”,remove)

function remove() {

    btn.classList.remove(“hover”);

  btn.textContent = “submit”;

  }

and when you hover on the button, your button should change as shown below

javascript hover effect on button

There is more you can do with the javascript hover effect than just changing the color and text content, but this is just to give you a simple illustration of how it works

1 thought on “Javascript Hover Effect and how to apply it”

  1. Pingback: using javascript Hover effect to change button color - Techknowmore

Leave a Comment

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