Javascript 如何使用display:flex；为不同的图像创建悬停效果；？

这是我在本报告中所述的上一个问题的延伸

从给定的解中，我可以得到悬停效应。但问题是我不能给不同的人不同的印象。谁能给我建议一些解决办法

---

您有多种选择：

• 为每个
  例如，假设您分别为

  应用
  id
  的第一个、第二个和第三个，您可以按如下方式添加背景：
  
  #first{
     background: url("/path-to-image");
  }
  #second{
     background: url("/path-to-image");
  }
  #third{
     background: url("/path-to-image");
  }
  
  
  使用不同的类（我更喜欢
  id
  ，因为类是用来对元素进行分组的）
  
  使用CSS伪选择器
  
  .wrap li:nth-child(1){
     background: url("/path-to-image");
  }
  .wrap li:nth-child(2){
     background: url("/path-to-image");
  }
  .wrap li:nth-child(3){
     background: url("/path-to-image");
  }
  
  
  

---

你的意思是你只需要为不同的

提供不同的背景吗？或者别的什么..？是的，我想在三个不同的
中显示三个不同的图像。你可以尝试CSS3过滤器，这样我也可以在悬停时更改图像？？是的，你可以使用
。wrap li:n子项（3）：悬停{background:url（“/path to other image”）；}