鼠标悬停时左侧菜单图像发生变化

Question

如何在鼠标悬停在左侧菜单中更改图像 如下图，没有鼠标悬停

鼠标悬停后，我们想将图像更改为白色。当前图像未更改

Answer 1

您可以使用CSS做到这一点。

img {
  display: inline-block;
}

.option {
  display: flex;
  align-items: center;
}

.optiontext {
  padding: 1rem;
}

.hoverimage {
  display: none;
}

.option:hover>.image {
  display: none;
}

.option:hover>.hoverimage {
  display: inline-block;
}

<div class="option">
  <div class="image"><img src="https://via.placeholder.com/50x50/ff0000/"></div>
  <div class="hoverimage"><img src="https://via.placeholder.com/50x50/00ff00/"></div>
  <div class="optiontext">Settings</div>
</div>