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

Question

当我用CSS悬停在具有类名项的div上时，如何用另一个图标图像改变一个图标图像？我尝试了以下操作：.item：hover.icon img{background-image：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>

Answer 1

您不需要javascript来执行此操作，只需删除image标记，并将span设置为icone bybackground-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');
}

html prettyprint-override"><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>