如何在CSS中懸停時更改影像源？-有解無憂

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

大家好，網上或堆疊溢位。我是網路開發的新手，我正在克隆互聯網上的一些網站。現在我需要創建一個影像，而不是當我將滑鼠懸停在該影像上時應該更改。我試過這樣的事情（

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

) 但它不起作用。那么伙計們，我現在需要做什么？你能解決這個問題嗎？？？

uj5u.com熱心網友回復：

一個簡單的靜態實作。

  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>

uj5u.com熱心網友回復：

正如Authentic Sc??ience提供的，img src和background不一樣的。當你試圖做

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

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

如果您不想最初將列的背景設定為您希望使用的第一張影像，然后使用懸停效果，則需要使用 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。您還可以最初設定img srcusing JavaScript的值并完全洗掉行內 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>

您可以在此處閱讀這兩個事件偵聽器的檔案：

對于滑鼠輸入點擊這里

對于滑鼠離開點擊這里

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/372625.html

標籤：html css 图片徘徊

上一篇：我們可以在Xamarin共享專案中將多個解析度影像作為嵌入檔案嗎？

下一篇：如何在過濾器分支之前和之后區分repo？