Question

我使用flexslider显示带缩略图的幻灯片。最近我添加了一个css代码来显示缩略图悬停时的叠加层。但问题是当我点击缩略图时没有任何反应。

.flex-control-nav li{
    position: relative;
}
.flex-control-nav li img{
    position: relative;
    z-index: 2;
}
.flex-control-nav li:hover img{
    opacity: .5;
}
.flex-control-nav li::after{
    display: block;
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    background-image: url(//i.imgur.com/xMS5K4O.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40px;
    z-index: 1;
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
}
.flex-control-nav li:hover::after{
    top: 0;  
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
}

但当我删除content: " ";块时，它似乎有效，否则点击缩略图时没有任何反应。

以下是滑块 slider demo

的演示

有人能告诉我我做错了什么吗？

Answer 1

尝试将:after添加到img元素，将li:after更改为img:after

flexslider幻灯片在缩略图点击时不会变换

1 个答案: