Change logo on hover

In order to change the logo on hover, we need a couple of lines of JavaScript. Don’t worry if you’re not familiar with it. Because I will show you everything step by step & give you the code that you can copy-paste on your website.

All you need is to replace a CSS ID with yours.

In this post, I used a Divi theme and show you how to change the logo on hover on the Divi website. However, you can implement the same strategy on Elementor and any other WordPress websites.

Let’s get started.

How to change the logo on hover?

JavaScript code that I explained in the above video

As you have seen in the above video, I have explained how to change the logo in “mouseover” & “mouseleave” events. Below is the exact code that I have written that you can copy & paste into your project.

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  let logo = document.getElementById("logo")
  logo.addEventListener('mouseover', (event) => {
    logo.src="your-hover-logo-link.png"
  })
  logo.addEventListener('mouseleave', (event) => {
    logo.src="your-regular-logo-link.png"
  })
})
</script>

If you copy-paste the above code, make sure to replace the CSS ID (if it’s different than mine), and also don’t forget to replace the two logos (image) paths/links with your actual logos.

How to use/paste the code into your website?

If you have to wrap the JavaScript code into the <script> tag as you see above. This is applicable if you’re using the Divi theme’s default integration tag to write code or Elementor (pro) custom code.

But if you’re using/writing the code in a child theme or in a “.js” file, then you don’t have to wrap the code with <script> tag.

Where in Divi theme you can paste/write the code

After you log in, navigate to “Divi → Theme Options → Integration” and paste the code in “Add code to the < head > of your blog

Add code to Divi theme
Add JavaScript to the Divi theme

Where/how to write this javascript to Elementor pro

If you’re using Elementor, navigate to “Elementor – Custom Code” and add a new custom code (see the screenshot below).

Create custom code in Elementor pro

On the next screen, you can choose any title for the code block (it does not matter), paste the code, make sure the location is selected to <head>, and publish. See the following screenshot below as a reference.

Elementor pro custom code block

That’s it! Make sure to wrap your javascript within <script> tag (as you see on the above screenshot).

How to write this javascript code on any other themes/websites

You can write the code in your theme file. However, if you’re using any third-party theme, make sure to use a child theme. Otherwise, your code/customize will be overwritten by the next update.

Also, there are lots of code snippet plugins in the WordPress repository that you can use.

Code reference:

  1. DOMContentLoaded
  2. mouseover
  3. mouseleave
  4. addEventListener

Conclusion

Changing the logo on hover is a rare thing and most of you don’t need this. However, in some cases, it’s important especially if you’re working for a client and if the client demands it.

As a web developer, I got this request several times in the past and also found this type of request on various online platforms.

Whatever the case, now you have it. Therefore if you still have any questions or confusion, please feel free to reach out.