如何使用display：flex;？为不同的图像创建悬停效果？

Question

这是我在此SO link

上描述的上一个问题的扩展

从给定的解决方案中我可以获得悬停效果。但问题是我不能给不同的图像。谁能建议我一些解决方案！

Answer 1

您有多种选择：

• 为每个id

  提供具体的<li>个

  例如，我们假设您分别为id申请<li>的第一，第二和第三位您可以按如下方式添加背景：

  #first{
     background: url("/path-to-image");
  }
  #second{
     background: url("/path-to-image");
  }
  #third{
     background: url("/path-to-image");
  }
  

• 使用不同的类（我更喜欢id＆＃39; s，因为类用于分组元素）

• 使用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");
  }
  

喜欢this