Question

我正在为响应式网站创建简单的照片库（php），当显示照片时，我希望在鼠标悬停时显示叠加导航（对于桌面，采用另一种移动方式）。叠加（在照片上）应该是与给定照片（可变宽度）相同宽度的div，左侧导航是左侧部分的25％，右侧是右侧25％。当显示照片并且鼠标光标在照片之外时，看不到任何内容。当鼠标光标悬停在左侧部分大＆lt;被展示。并且＆gt;对于右侧。＆LT;和＆gt;应该垂直居中。我得到它的工作，但只有绝对定位，声明确切的位置，但结果没有响应，并在窗口较小时中断：

jsfiddle.net/mwf5618r/

我也尝试过使用flex和z-index但是没有让它工作。下面是我使用flex创建但不起作用的内容。只要它有响应，我就不需要使用flex。

jsfiddle.net/x1jexvb0/

你会帮助我干净利落地做出反应吗？非常感谢。

Answer 1

我更改了包含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;}

好吧也许这个？

照片库导航 - css叠加

1 个答案: