flexslider幻灯片在缩略图点击时没有改变

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