How can I change an image source on hover in CSS?-CodePudding

 <div class="row">
  <div class="column">
    <img src="phone.png" alt="Phone" class="column1" />
    <p>Walnut MagSafe Stand</p>
    <p>$120</p>
  </div>
  <div class="column">
    <img src="laptop.png" alt="Laptop" class="column2" />
    <p>Walnut Laptop Riser</p>
    <p>$150</p>
  </div>
  <div class="column">
    <img src="tablet.png" alt="Tablet" class="column3" />
    <p>Walnut iPad Stand</p>
    <p>$80</p>
  </div>
  <div class="column">
    <img src="pc.png" alt="PC" class="column4" />
    <p>Walnut Monitor Stand</p>
    <p>$100</p>
  </div>
</div>

CSS

    .row {
  width: 100%;
  margin: 50px 0 50px 0;
}
.column {
  float: left;
  width: 25%;
  height: 434px;
}

.column p {
  font-family: "Roboto", sans-serif;
  font-family: "Roboto Condensed", sans-serif;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
  line-height: 21px;
  font-size: 14px;
  letter-spacing: 0.7px;
  text-align: center;
  color: #a0a0a0;
}

.column1:hover {
  background: url(products/walnut-magsafe-stand-hover.jpg);
}

Hello everyone on the Internet or on the stackoverflow. I'm new in web development and I'm cloning some websites on the internet. Now I need to create an image than when I hover on this image should be changed. I tried something like this(

.column1:hover {
  background: url(products/walnut-magsafe-stand-hover.jpg);
}

) but it doesn't work. So guys what do I need to do now? Can you solve this problem???

CodePudding user response：

A simple static implementation.

  a {
      background: url("https://i.stack.imgur.com/gROnM.jpg");
      background-repeat: no-repeat;
      background-size: contain;
      width: 200px;
      display: flex;
      height: 200px;;
    }

    a:hover {
      background: url("https://i.stack.imgur.com/hMQdU.jpg");
      background-repeat: no-repeat;
      background-size: contain;
    }

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>

<body>

  <a href=""></a>

</body>

</html>

CodePudding user response：

As provided by Authentic Science, img src and background are not the same. When you are trying to do

.column1:hover { background: url(products/walnut-magsafe-stand-hover.jpg); }

You are only changing the background of the img not the img src tag.

If you do not want to initially set the background of the column to the first image you wish to use and then use a hover effect, you will need to use JavaScript. This can be done by changing your classes for each "column#" into ids and inserting this JavaScript code by creating a script.js in your source folder

If you wish to use this solution you will need to duplicate the code for each column and rename them accordingly. This can all be done in one file.

// Define your variables for column1 img
let col1 = document.getElementById('column1');
let col1OriginalSource = 'phone.png';
let col1NewSource = 'phone2.png';

// Event fires when mouse enters
// Changes the value to your stored change src reference above
col1.addEventListener('mouseenter', function (event) {
  event.target.src = col1NewSource;
});

// Event fires when mouse leaves
// Resets the value back to the stored src reference above
col1.addEventListener('mouseleave', function (event) {
  event.target.src = col1OriginalSource;
});

The reason for storing the source references as a variable is to allow for easy modification in the future. This will put each of your src references in one spot and you will only need to change that one string to update your src. You can also initially set the value of the img src using JavaScript and completely remove the inline HTML tag to make it a complete dynamic reference.

Your HTML5 / index.html file should look like this

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="main.css" />

    <title>Document</title>
  </head>
  <body>
    <div class="row">
      <div class="column">
        <img src="phone.png" alt="Phone" id="column1" />
        <p>Walnut MagSafe Stand</p>
        <p>$120</p>
      </div>
      <div class="column">
        <img src="laptop.png" alt="Laptop" id="column2" />
        <p>Walnut Laptop Riser</p>
        <p>$150</p>
      </div>
      <div class="column">
        <img src="tablet.png" alt="Tablet" id="column3" />
        <p>Walnut iPad Stand</p>
        <p>$80</p>
      </div>
      <div class="column">
        <img src="pc.png" alt="PC" id="column4" />
        <p>Walnut Monitor Stand</p>
        <p>$100</p>
      </div>
    </div>

    <!-- Insert the script tag here after the DOM elements -->
    <script src="script.js"></script>
  </body>
</html>

You can read the documentation for both event listeners here:

For mouseenter click here

For mouseleave click here