如何使用显示器为不同的图像创建onhover效果：flex;？

This is an extension of my previous question described on this SO link

这是我之前在此SO链接上描述的问题的扩展

From the given solution i am able to get on hover effect. but the problem is i m not able to give different image to different . Can anyone suggest me some solution!

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

1 个解决方案

#1

You have multiple options:

您有多种选择:

• Give specific id's to each <li>

  为每个

• 指定具体的ID

for eg, let's say you apply id's first, second and third respectively for the <li>'s You can add the background as follows:

例如,假设您分别为

• 添加id的第一个,第二个和第三个。您可以添加背景如下:

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

Use different classes (i prefer id's since classes are meant to be used to group elements)

使用不同的类(我更喜欢id,因为类用于分组元素)

Use CSS pseudo selectors.

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

like this