如何更改 CSS 中 hover 上的图像源？

Question

 <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);
}

大家好网上还是上栈溢出。 我是 web 开发的新手，我正在克隆互联网上的一些网站。 现在我需要创建一个图像，而不是我在这个图像上的 hover 应该更改。 我试过这样的（

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

) 但它不起作用。 那么，伙计们，我现在需要做什么？ 你能解决这个问题吗？？？

Answer 1

一个简单的 static 实现。

 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>

Answer 2

Authentic Science 提供的img src和background是不一样的。 当你试图做

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

您只是在更改 img 的背景，而不是img src tag 。

如果您不想将列的背景设置为您希望使用的第一个图像，然后使用 hover 效果，则需要使用 JavaScript。 这可以通过将每个“列#”的类更改为 id 并通过在源文件夹中创建script.js插入此 JavaScript 代码来完成

如果您希望使用此解决方案，您需要复制每一列的代码并相应地重命名它们。 这一切都可以在一个文件中完成。

// 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;
});

将源引用存储为变量的原因是为了便于将来修改。 这会将您的每个 src 引用放在一个位置，您只需更改该字符串即可更新您的 src。 您还可以使用 JavaScript 初始设置img src的值，并完全删除内联 HTML 标记以使其成为完整的动态参考。

您的 HTML5 / index.html 文件应如下所示

<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>

您可以在此处阅读两个事件侦听器的文档：

对于鼠标进入点击这里

鼠标离开点击这里

如何更改 CSS 中 hover 上的图像源？

问题描述

2 个解决方案

解决方案1
0 2021-11-28 18:24:17

解决方案2
0 2021-11-28 21:49:17

如何更改 CSS 中 hover 上的图像源？

问题描述

2 个解决方案

解决方案1 0 2021-11-28 18:24:17

解决方案2 0 2021-11-28 21:49:17

解决方案1
0 2021-11-28 18:24:17

解决方案2
0 2021-11-28 21:49:17