目前使用Flexslider,並希望能夠隱藏目前出現在圖像右側和左側的導航箭頭,但不會讓用戶在圖像上懸停時顯示導航箭頭。我記得它在舊網站上被解決 - 鬆餅一個,但在woothemes上找不到它。 有沒有人有想法如何更改/修改/添加信息做到這一點? 在此先感謝。Flexslider - 導航箭頭隱藏,直到懸停
1
A
回答
0
你也許可以通過jQuery完成這個任務。在我來說,我使用Drupal的FlexSlider所以我不能保證,你將有相同的CSS選擇器,但我希望這段代碼可以提供一個總體思路:)
$(document).ready(function(){$("div.flexslider").hover(function() {
$("a.prev").show();
$("a.next").show();
},
function() {
$("a.prev").hide();
$("a.next").hide();
});})
祝您好運!
P.S.我忘了提及你應該在你的CSS中設置一個標籤選擇器來顯示:none;默認。
+0
或者乾脆[fadeToggle();](https://api.jquery.com/fadeToggle/) – Manolis 2014-03-12 14:49:11
1
您可以修改CSS中的箭頭。如果你想讓箭頭始終可見,你想改變不透明度。它目前設置爲0,這使得它在懸停之前不可見(懸停不透明度設置爲1,這是完全可見的)。所以,你只想使其可見像這樣:
.flex-direction-nav a {opacity: 1;}
如果你那麼想改變,你需要簡單地更改頁邊距箭頭的位置。它目前設置爲-20px。如果你想讓它出現在禁區外,你需要使它像這樣:
.flex-direction-nav a {margin: -40px 0 0;}
如果沒有這兩個你的CSS是這樣的:
.flex-direction-nav a {opacity: 1; margin: -40px 0 0;}
這將使你的箭始終可見並出現在圖像之外(圖像的左側和右側,而不是圖像頂部)。
相關問題
- 1. Flexslider:關閉導航箭頭
- 2. css隱藏按鈕,直到div懸停
- 3. 如何隱藏導航欄中的元素,直到懸停在CSS中?
- 4. 以導航鏈接框爲中心的箭頭懸停效果
- 5. 隱藏QScrollBar箭頭
- 6. 導航箭頭不更新:導航箭頭在高速航行
- 7. 隱藏和顯示基於滾動位置的導航箭頭
- 8. 菜單右箭頭懸停
- 9. Flexslider - 使用控制容器和方向箭頭導航?
- 10. Flexslider 2:如何隱藏我的初始幻燈片的方向導航「上一頁」箭頭?
- 11. 隱藏的導航欄懸停但不是全寬
- 12. Javascript導航,懸停顯示,取消隱藏超時,怎麼樣?
- 13. jQuery的每個導航懸停顯示和隱藏
- 14. 組合框隱藏箭頭
- 15. JavaFX的:隱藏COMBOX箭頭
- 16. Flexslider導航按鈕不可見懸停,橙色框
- 17. flexslider方向箭頭響應
- 18. Woothemes flexslider箭頭不顯示
- 19. 導航欄懸停
- 20. 陣營-導航:隱藏父頭
- 21. 箭頭鍵庫導航
- 22. 滑動導航箭頭
- 23. jquery箭頭鍵導航
- 24. 導航使用箭頭鍵
- 25. ListBox + WrapPanel箭頭鍵導航
- 26. 響應箭頭Breadcrumb導航
- 27. jQuery的箭頭鍵導航
- 28. 箭頭導航你在
- 29. CSS下拉導航/箭頭
- 30. 將導航箭頭添加到菜單
啊我也需要這個! – elshae 2012-04-16 14:50:39