Html CSS内容滑块项目符号预览

下面我有一个只使用HTML和CSS的内容滑块代码。当我将鼠标悬停在底部3个项目符号之一上时，幻灯片的预览图像会显示在项目符号的正上方。大概是这样的： 有什么有用的吗，谢谢

.pic{
宽度：100%；
身高：100%；
}
旋转木马{
边框样式：实心；
边框宽度：1px；
边框颜色：rgba（0,0,0,0.05）；
盒影：0px 1px 6px rgba（0,0,0,0.1）；
寡妇：100%；
高度：335px；
}
.旋转木马内部{
位置：相对位置；
溢出：隐藏；
宽度：100%；
高度：335px；
}
.旋转木马打开：选中+.旋转木马项目{
位置：绝对位置；
不透明度：100；
背景色：白色；
宽度：100%；
高度：335px；
}
.传送带项目{
位置：绝对位置；
不透明度：0；
填充顶部：10px；
文本对齐：居中；
}
.传送带控制{
背景：rgba（0,0,0,0）；
边界半径：50%；
颜色：#008c6c；
光标：指针；
显示：无；
字体大小：40px；
高度：40px；
线高：35px；
位置：绝对位置；
最高：50%；
-webkit转换：翻译（0，-50%）；
光标：指针；
-ms变换：翻译（0，-50%）；
转换：翻译（0，-50%）；
文本对齐：居中；
宽度：40px；
z指数：10；
}
.carousel-control.prev{
左：2%；
}
.carousel-control.next{
右：2%；
}
.转盘控制：悬停{
背景：rgba（0,0,0,0.05）；
颜色：#008c6c；
}
#转盘-1：已选中。控制-1，
#转盘-2：已选中。控制-2，
#转盘-3：已选中。控制-3{
显示：块；
}
.转盘指示器{
保证金：0；
填充：2px；
位置：绝对位置；
底部：-7px；
左：0；
右：0；
文本对齐：居中；
}
.转盘指示器{
显示：内联块；
利润率：0.5px；
}
.旋转木马子弹{
颜色：rgba（0,0,0,0.05）；
光标：指针；
字体大小：35px；
}
.旋转木马子弹：悬停{
颜色：rgba（0,0,0,0.1）；
}
.HRConnectImage
{宽度：375px；
填充顶部：50px；
显示：内联块；}
#转盘-1:选中~。控制-1~。转盘指示器li:第n个子项（1）。转盘项目符号，
#旋转木马-2:选中~。控制-2~。旋转木马指示器li:第n个子项（2）。旋转木马项目符号，
#旋转木马-3:选中~。对照-3~。旋转木马指示器li:第n个孩子（3）。旋转木马项目符号{
颜色：#008c6c；
}
#头衔{
宽度：100%；
位置：绝对位置；
填充：0px；
保证金：0px自动；
文本对齐：居中；
字体大小：27px；
颜色：rgba（255，255，255，1）；
字体系列：“开放式Sans”，无衬线；
z指数：9999；
文本阴影：0px 1px 2px rgba（0,0,0,0.33），-1px 0px 2px rgba（255,255,0）；
}
#p
{
文本对齐：居中；
字体大小：粗体；}

‹
› 
‹
›
‹
› 

● 

● 

● 

您在提供的链接上看到的是主滑块内的一个完全独立的滑块。但这里是一个简单的例子。在lis内的每个标签旁边添加一个元素。然后为它们定义一个绝对位置，并将高度设置为零

最后，添加悬停css并向其添加转换

.pic{
宽度：100%；
身高：100%；
}
旋转木马{
边框样式：实心；
边框宽度：1px；
边框颜色：rgba（0,0,0,0.05）；
盒影：0px 1px 6px rgba（0,0,0,0.1）；
寡妇：100%；
高度：335px；
}
.旋转木马内部{
位置：相对位置；
溢出：隐藏；
宽度：100%；
高度：335px；
}
.旋转木马打开：选中+.旋转木马项目{
位置：绝对位置；
不透明度：100；
背景色：白色；
宽度：100%；
高度：335px；
}
.传送带项目{
位置：绝对位置；
不透明度：0；
填充顶部：10px；
文本对齐：居中；
}
.传送带控制{
背景：rgba（0,0,0,0）；
边界半径：50%；
颜色：#008c6c；
光标：指针；
显示：无；
字体大小：40px；
高度：40px；
线高：35px；
位置：绝对位置；
最高：50%；
-webkit转换：翻译（0，-50%）；
光标：指针；
-ms变换：翻译（0，-50%）；
转换：翻译（0，-50%）；
文本对齐：居中；
宽度：40px；
z指数：10；
}
.carousel-control.prev{
左：2%；
}
.carousel-control.next{
右：2%；
}
.转盘控制：悬停{
背景：rgba（0,0,0,0.05）；
颜色：#008c6c；
}
#转盘-1：已选中。控制-1，
#转盘-2：已选中。控制-2，
#转盘-3：已选中。控制-3{
显示：块；
}
.转盘指示器{
保证金：0；
填充：2px；
位置：绝对位置；
底部：-7px；
左：0；
右：0；
文本对齐：居中；
}
.转盘指示器{
显示：内联块；
利润率：0.5px；
职位：相对；/*您必须这样做*/
}
.转盘指示器.转盘预览{
位置：绝对位置；
宽度：108px；
顶部：-0；
左：50%；
左边距：-52px；
高度：0px；
过渡：0.5s全部；
溢出：隐藏；
}
.转盘指示器.转盘预览img{
最大宽度：100px；
最大高度：50px；
填充：2px；
背景色：#fff；
边框：实心2px#ccc；
}
.carousel指示器li:悬停.carousel预览{
高度：54px；
顶部：-50px；
}
.旋转木马子弹{
颜色：rgba（0,0,0,0.05）；
光标：指针；
字体大小：35px；
}
.旋转木马子弹：悬停{
颜色：rgba（0,0,0,0.1）；
}
.HRConnectImage
{宽度：375px；
填充顶部：50px；
显示：内联块；}
#转盘-1:选中~。控制-1~。转盘指示器li:第n个子项（1）。转盘项目符号，
#旋转木马-2:选中~。控制-2~。旋转木马指示器li:第n个子项（2）。旋转木马项目符号，
#旋转木马-3:选中~。对照-3~。旋转木马指示器li:第n个孩子（3）。旋转木马项目符号{
颜色：#008c6c；
}
#头衔{
宽度：100%；
位置：绝对位置；
填充：0px；
保证金：0px自动；
文本对齐：居中；
字体大小：27px；
科洛