Home/ Questions/Q 9036475
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T09:00:38+00:00

Hello friends. I want to change the image on hover but my code is

  • 0

Hello friends. I want to change the image on hover but my code is not working.

Code so far 

<!DOCTYPE html>
<html>
<style>
a.rollover span.displace {
    display: block;
    width: 150px;
    height: 44px;
    text-decoration: none;
    }

a.rollover span.displace img:hover {
    background: url("images/red.png");
    display: block;
    }


</style>
<body>
<a href="#" class="rollover" title="Webvamp"><span class="displace"><img src="images/blue.png"/></a>


</body>
</html>

Any help is highly appreciated…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Code below should work.
    CSS:

    <style>
a.rollover span.displace {
    display: block;
    width: 150px;
    height: 44px;
    text-decoration: none;
     background: url("images/blue.png");
}

a.rollover span.displace:hover {
    background: url("images/red.png");        
}
</style>

    And HTML:

    <a href="#" class="rollover" title="Webvamp"><span class="displace"></span></a>

    You are trying to place a background for an image which shows another image, so basically your background is hidden below image which is specified with src

    If you want to have img – you can use solution from this answer:

    <a href="#" class="rollover" title="Webvamp"><span class="displace"><img src="images/blue.png" onmouseover="this.src='images/red.png';" onmouseout="this.src='images/blue.png';"/></span></a>

    Another option would be:

    <a href="#" class="rollover" title="Webvamp"><span class="displace"><img src="images/blue.png" class="initial" /><img src="images/red.png" class="hover"/> </span></a>

    And CSS:

    img.hover{display:none;}

a.rollover span.displace {
    display: block;
    width: 150px;
    height: 44px;
    text-decoration: none;        
}

a.rollover span.displace:hover img.hover{
    display:block;      
}

a.rollover span.displace:hover img.initial{
    display:none;      
}
    • 0