在 Reactjs 中更改行悬停图像

Question

我正在开发一个反应应用程序，要求是在行悬停时更改图像。

有多行，每行有两列（名称和图像）。要求是只在该行悬停时显示头盔图像，当它没有悬停时，它应该显示相机图像。

我可以在图像列悬停时更改图像，但如何在行悬停时更改图像？

<div class="container">
  <div> Name </div>
  <div> 
    <img src="https://img.icons8.com/material/4ac144/256/camera.png" height="30px" width="30px"/> 
    <img src="https://img.icons8.com/material/4ac144/256/user-male.png" height="30px" width="30px"/>
</div>
</div>


.container{
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100px;
  border: 2px solid black;
}
.container:hover {
  background-color: yellow;
}

Answer 1

如果您想在将鼠标悬停在其父 .container 上时更新图像元素的 src 属性，则必须使用 JavaScript。您可以使用 jQuery 来实现您的目标：

$('.container').hover(
    () => { // on mouse over
        $(this).find('img').attr('src', '[your new image url]')
    },
    () => { // on mouse out
        $(this).find('img').attr('src', '[your old image url]')
    }
);

看看这个小提琴，以更好地了解正在发生的事情： https://jsfiddle.net/g9p834fb/

编辑：这是在您更新问题之前提交的。

要简单地替换行中的图像，您只需更新 CSS。请参阅此小提琴以了解所需的更改：https://jsfiddle.net/g9p834fb/1/

要点是您可以根据容器的状态（即悬停，未悬停）为图像定义样式

这是更新后的 html 的样子：

    <img src="https://img.icons8.com/material/4ac144/256/camera.png" height="30px" width="30px" class="default-image"/> 
    <img src="https://img.icons8.com/material/4ac144/256/user-male.png" height="30px" width="30px" class="hover-image"/>

如您所见，我们使用两个类来区分两种状态。

然后你只需要添加这两种样式：

.container .default-image,
.container:hover .hover-image{
  display: block;
}

.container .hover-image,
.container:hover .default-image{
  display: none;
}

应该可以达到你想要的效果。

Answer 2

不需要任何 js 来实现这一点，只需像这样简单的 css 悬停：

.container {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100px;
  border: 2px solid black;
}

.show-on-hover {
  display: none;
}

.container:hover {
  background-color: yellow;
}

.container:hover .show-on-hover {
  display: block;
}

.container:hover .hide-on-hover {
  display: none;
}

<div class="container">
  <div> Name </div>
  <div>
    <img class="hide-on-hover" src="https://img.icons8.com/material/4ac144/256/camera.png" height="30px" width="30px" />
    <img class="show-on-hover" src="https://img.icons8.com/material/4ac144/256/user-male.png" height="30px" width="30px" />
  </div>
</div>