照片庫導航 - css覆蓋

-1

我創建一個簡單的照片庫（PHP）的響應網站，當一張照片顯示時，我想覆蓋導航顯示鼠標懸停（桌面上，採取另一種方法爲手機）。覆蓋圖（照片上）應該是與給定照片相同寬度的div（可變寬度），左側導航是左側部分的25％，右側是25％。當顯示照片並且鼠標光標在照片之外時，什麼都看不見。當鼠標光標懸停在左側部分時，顯示大<。並>右側。 >>應該垂直居中。我得到它的工作，但只能用絕對定位，宣佈確切位置，但效果不敏感和破裂時窗較小：照片庫導航 - css覆蓋

jsfiddle.net/mwf5618r/

我嘗試使用Flex和z-index的太多，但沒有得到它的工作。以下是我用flex創建的內容，但不起作用。只要響應良好，我不需要使用flex。

jsfiddle.net/x1jexvb0/

你能幫我把它做得乾淨而且有反應嗎？非常感謝。

來源

2017-04-03 himi

我改變了一些包含CSS的HTML元素，希望這會爲你做好工作。還要檢查新的小提琴：http://jsfiddle.net/mwf5618r/1/embed/

HTML：

<div style="position: relative;"> 

    <a href="#left" class="photo_nav left"> 
     <div id="photo_nav"> 
      &lt; 
     </div> 
    </a> 
    <a href="#right" class="photo_nav right"> 
     <div id="photo_nav"> 
      &gt; 
     </div> 
    </a> 
    <div style="margin:0;padding:0;width:100%;margin:auto;"> 
     <img src="http://3.bp.blogspot.com/_w0r3cYUSD7A/Sob415afOVI/AAAAAAAABa4/-J_vkiTkITE/s1600/sunflare.jpgg" class="photo" style="width:100%;"> 
    </div> 

</div>

CSS：

a.photo_nav { 
    position: absolute; 
    width: 25%; 
    height:100%; 
    padding: 0; 
    margin: 0; 
    opacity:0; 
    font-size: 200px; 
    text-decoration:none; 
    background:none; 
    transition: 0.3s; 
} 
a.photo_nav:hover { 
    color:#fff; 
    opacity:0.6; 
} 
a.photo_nav #photo_nav { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 
a.photo_nav.left {left: 0;} 
a.photo_nav.right {right: 0;} 
a.photo_nav.left div#photo_nav {left: 0;} 
a.photo_nav.right div#photo_nav {right: 0;}

嗯，也許這一點？

來源

2017-04-03 14:11:13 dutchsociety

謝謝你的努力。我試圖實現的是讓導航div 100％的圖像高度，因此整個左/右的25％可用於導航。導航div應該從圖像的邊緣開始。我會繼續努力.. – himi

看看新的更新，做了一些CSS的變化，希望這可以幫助你。導航div從邊緣的頂部開始，A標籤內的div位於垂直中間/中間。 – dutchsociety

就是這樣！非常感謝你的幫助！ :-) – himi

照片庫導航 - css覆蓋

回答

相關問題