How to Change an Image Source URL on Hover Using HTML, CSS, and JavaScript?

Changing Image Source URL on Hover

Problem:

You want to dynamically update the source URL of an <img alt="How to Change an Image Source URL on Hover Using HTML, CSS, and JavaScript?" > tag when the user hovers over it.

Attempt and Issue:

Your initial approach using CSS's content property and :hover selector didn't work.

Solution:

While changing the src attribute directly with CSS is not possible, here are two alternative methods using HTML, CSS, and JavaScript:

Method 1: Using Background Images

1. Replace the <img alt="How to Change an Image Source URL on Hover Using HTML, CSS, and JavaScript?" > tag with a
   tag.
2. Set the background image of the
   to the default image using CSS.
3. Use the :hover selector to update the background image to the hover image.

<div>
<pre class="brush:php;toolbar:false">#my-div:hover {
    background: url(hover-image.jpg);
}

Method 2: Using JavaScript

1. Define JavaScript functions to change the src attribute on hover and unhover.
2. Assign the hover function to the onmouseover event and the unhover function to the onmouseout event of the <img alt="How to Change an Image Source URL on Hover Using HTML, CSS, and JavaScript?" > tag.

<img  alt="How to Change an Image Source URL on Hover Using HTML, CSS, and JavaScript?" >

function hoverImage(element) {
    element.src = "hover-image.jpg";
}

function unhoverImage(element) {
    element.src = "default-image.jpg";
}