时间戳

首页 > 解决方案 > 在 CSS 中悬停时切换图像

css - 在 CSS 中悬停时切换图像

问题描述

我在 CSS 中创建了一个网格（下面的代码中只显示了其中一项）

CSS: /* 网格 1 开始 */

.grid-1 {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: auto quto auto;
grid-gap: 4px;
}

/* 网格 1 结束 */

html:

<div class="item-1"><a href="image#1/"><img class="alignleft wp-image-5497 size-full" src="image#1.png" alt="" width="300" height="200" /></a></div>

如果将鼠标悬停在图像#1 上，我需要将图像#1（仅悬停时）替换为图像#2，将代码添加到上面的行中是什么？

任何帮助，将不胜感激。网格中还有其他“项目”，但我只显示了一行代码以保持简单。

标签： csshovercss-grid

解决方案

这并不是一个真正的问题，因为大多数解决方案都完全独立于布局。

但@Paulie_D 是对的——CSS 不能更改 html 代码。您要么需要页面上已有的图像，要么使用 javascript 交换新图像的 src。或者background-image在元素上使用属性a而不是使用img元素。

但只需将 'on-hover' 添加img到网格中（立即与 'non-hover' 一起img）并使用 css 隐藏/取消隐藏可能是最简单、最快的解决方案：

<a href="/">
  <img src="https://via.placeholder.com/300x200/b4c833/000000?text=Image+1" class="img1"/>
  <img src="https://via.placeholder.com/300x200/000000/b4c833?text=Image+2" class="img2"/>
</a>
<style>
img {
  display: block;
}
img + img {
  display: none;
}
a:hover img {
  display: none;      
}
a:hover img + img {
  display: block;      
}
</style>

我在这里使用广泛的选择器......您可能想要更具体。假设您提供的示例中的代码结构相同，这应该足够了：

    .grid-1 img {
      display: block;
    }
    .grid-1 img + img {
      display: none;
    }
    .grid-1 a:hover img {
      display: none;      
    }
    .grid-1 a:hover img + img {
      display: block;
    }

此外，您的问题中还有一个错字，该错字也出现在您的示例代码中： grid-template-rows: auto quto auto;应该是grid-template-rows: auto auto auto;（注意第二个auto）

推荐阅读