当我用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>
您不需要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');
}<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>