悬停项目块时交换图标图像答案

【问题标题】：Swap icon image when hover an item block悬停项目块时交换图标图像
【发布时间】：2018-05-10 01:26:11
【问题描述】：

当我将鼠标悬停在带有 CSS 类名称项的 div 上时，如何将一个图标图像更改为另一个？我试过这个： .item:hover .icon img { 背景图像：url（'./images/moon.png'）；但它不起作用。有什么想法吗？

<div class="col-md-4  item">
    <span class="icon"><img alt="" class="img-responsive" src="./images/sun.png"></span>
    <h3>This is text</h3>
    <p>Some text...</p>
    <p><a class="btn btn-primary" href="#">go</a></p>
</div>

【问题讨论】：

您没有将背景图片设置为 img 标签。

标签： javascript jquery html css

【解决方案1】：

将<img> 标签替换为background-image css 属性。然后在hover 属性中根据您希望悬停的图像类分配不同的不透明度。

要显示的图像应具有高不透明度（最大 1），隐藏不透明度应为 0

【讨论】：

【解决方案2】：

您不需要 javascript 来执行此操作，只需删除图像标签，并通过 background-image 属性将跨度设置为图标，请参阅示例

.item
{
background-color:#fff;
}
.item span.icon {

width:60px;
height:60px;
display:block;
background-image:url('https://png.pngtree.com/element_pic/00/16/06/25576e094d32c0e.jpg');
background-size:100%;
background-color:#fff;
}
.item:hover span.icon
{
background-image:url('http://moziru.com/images/moon-clipart-evening-12.jpg');
}

<div class="col-md-4  item">
    <span class="icon"></span>
    <h3>This is text</h3>
    <p>Some text...</p>
    <p><a class="btn btn-primary" href="#">go</a></p>
</div>

【讨论】：

【解决方案3】：

首先我直接回答你的问题：

悬停时将标签的不透明度设置为 0，然后将新背景图像保留在 span.icon 上。

.icon { display: inline-block }
.icon:hover { background-image: url(...); }
.icon:hover .img-responsive { opacity: 0; }

在此处查看演示 https://codepen.io/xavortm/pen/QOBrRK

现在，如果您想重构代码，这里有一些解决方案。

删除<img>标签，只使用background-image到span。像以前一样在悬停时更改它
保留两个大小相同的图像。在悬停时切换第一/第二（我不喜欢这个选项）

【讨论】：