时间戳

首页 > 解决方案 > 在悬停 CSS 上实现开关

html - 在悬停 CSS 上实现开关

问题描述

如果可能的话，我需要一些帮助。我想在这两张卡片中实现悬停时的图像开关。

我想让它像这样（链接中还提供了代码）

https://www.tutorialrepublic.com/codelab.php?topic=faq&file=changed-image-on-hover-with-css

谢谢各位，非常感谢！

标签： htmlcss

解决方案

我不建议使用background-image，因为它为整个元素/页面设置了背景——我使用了该content属性，但您可以轻松地将其切换出来。同样，您提供的两张图片托管在没有 SSL 证书的网站上，所以我将相同的图片上传到 imgur。

代码如下。确保在 CSS 中设置宽度和高度尺寸以满足您的需要（例如，也许您希望图像更小）。

.fan {
  content:url("https://i.imgur.com/XJDGjDI.jpg");
}

.fan:hover {
  content:url("https://i.imgur.com/FTmXIIf.jpg");
}
<body>
  <img class="fan"></div>
</body>

如果你愿意，你也可以用一点 JavaScript 来做同样的事情，你可以把它放在<script>HTML 中的标签中，或者放在它自己的文档中。看：

function back() {
  document.getElementById('fan').src = "https://i.imgur.com/FTmXIIf.jpg"
}

function front() {
  document.getElementById('fan').src = "https://i.imgur.com/XJDGjDI.jpg"
}
<img onmouseover="back()" onmouseout="front()" src="https://i.imgur.com/XJDGjDI.jpg" id="fan">

推荐阅读