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.
Whenever a user hover on a button, they usually expect a change to occur, the change could be;
- A change in the text color of the button.
- A change in the background color of the button.
using CSS to change button color on hover
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: white;
}
using JavaScript to change button color on hover
With CSS aside, 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>
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.
<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”)
}
</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”)
}
you can click here to learn how to change both the button color and the text content of your button using javascript
Pingback: Javascript Hover Effect and how to apply it - Techknowmore