在flexslider控制拇指懸停

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/

我希望這可以幫助你。 :)