在 ReactJS 中悬停时如何在特定图像上添加样式？

Question

问题是我想为图像添加边框并显示一个卡片，其中包含悬停时的信息，但它显示在所有图像上。

从电影 API 获取数据后，我将响应存储在 state 中：

const [movies, setMovies] = useState([])

useEffect(() => {
    /**side-effects**/
    setMovies(response.data)
 
},[])

然后

let style = {
    display: 'none'
  };
let imgStyle = {};

if(hover){
    style = {
      display: 'block'
    }
    imgStyle = {
      border: 1px solid white
    }
  }
  if(movies.length > 1) {
    display = (
      <div className="MovieContainer">
        <h2>Trending this week</h2>
        <Carousel>
          {movies.map((movie) => {
            return (
              <>
                <img
                  style={imgStyle}
                  onMouseEnter={() => setHover(true)}
                  onMouseLeave={() => setHover(false)}
                  className="Images"
                  key={movie.id}
                  src={movie.image}
                  alt={movie.title}
                />
                <Card style={style}>{movie.title}</Card>
              </>
            );
          })}
        </Carousel>
      </div>
    );
  }

but instead of adding a style to the *hovered* image, it also adds the style to all images.

I also tried using css for the border and it works the way I wanted but I couldn't think of any way for the Cards to show up when hovering 

Answer 1

你为什么不直接在css文件中做这个修改，你可以添加到你的css中

img:hover { "2px solid black" }

而不是做内联样式和使用onMouseEnteronMouseLeave