Question

我试图以用户在导航缩略图上悬停以显示带图标的叠加层的方式自定义flexslider（http://flexslider.woothemes.com/thumbnail-controlnav.html）。像这样http://callmenick.com/_development/image-overlay-hover-effects/

通过编辑flexslider js代码我设法添加div

<div class="thumb_overlay"></div><img src="'+s.attr("data-thumb")+'"'+c+"/>":'<a href="#">'+t+"</a>"

但我无法将其移动到图像上方，尽管我设置了相对位置

http://jsfiddle.net/livewirerules/r4uthech/1/

任何帮助将不胜感激

由于

Answer 1

只需将其添加到您的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; 
}

如果您愿意，可以更新您的小提琴：

http://jsfiddle.net/r4uthech/2/

我希望这可以帮到你。：）

在flexslider控件拇指悬停上显示叠加

1 个答案: