Question

当我将鼠标悬停在带有css的班级名称项目的div上时，如何将一个图标图像更改为另一个图标？我试过这个：.item：hover .icon img { 背景图像：网址（ './图像/ 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>

Answer 1

您不需要使用javascript，只需删除图片代码，然后通过background-image属性将范围设置为icone，请参阅示例

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

悬停时，将标签的不透明度设置为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到范围。像以前一样在悬停时更改
保留两张相同尺寸的图像。在悬停时切换第一个/第二个（我不喜欢这个选项）

Answer 3

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

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

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

3 个答案: