HTML悬停图标

Question

我只使用HTML和CSS设计一个非常基本的网站。 在设计中，我添加了一些图标，即图像。这些图片我已经在我的HTML中添加了它们。我想用另一个图像创建一个悬停效果。有什么想法吗？

这是我的HTML和CSS

.icon-group {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 15px;

}

.view-icon,
.edit-icon,
.delete-icon {
	width: 50px;
	height: 50px;
	display: inline-block;
	padding: 10px;
}

<div class="card one">
			<img class="avatar" src="images/avatar-01.jpg" alt="Foto Felipe Kaiser">
			<p class="name">Felipe Kaiser</p>
			<p class="position">Periodista</p>
			<hr>
			<div class="icon-group">
				<div class="view-icon">
					<a href="#">
						<img src="images/view-icon.png" alt="Icono ver">
					</a>
				</div>
				<div class="edit-icon">
					<a href="#">
						<img src="images/edit-icon.png" alt="Icono editar">
					</a>
				</div>
				<div class="delete-icon">
					<a href="#">
						<img src="images/delete-icon.png" alt="Icono delete">
					</a>
				</div>
			</div>
		</div>

Answer 1

要在悬停任何项目时添加不同的css行为，您必须定义此行为并将:hover添加到容器ID /类。在你的例子中，它可能是：

.icon-group {
width: 100%;
margin: 0 auto;
text-align: center;
padding-bottom: 15px;
}

.icon-group:hover {
background-color: grey;
}

例如