CSS:将目标区域悬停在元素高度的 50% 处

Question

我想，和你一样hover a GIF shot on Dribbble , 当光标位于元素高度顶部之后/50% 处时显示带有信息的 div。

测试示例
我做了这个，这是有效的，但有点棘手......特别是当你鼠标移开时。
— http://codepen.io/anon/pen/meZbJK

使用的 CSS 代码

.item {
    position:relative; width:960px;

    &--infos {
        opacity:0;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        padding:0 10%;
        text-align:center;
        background:transparentize(#a7ecf8, 0.075);
        transition:opacity 200ms ease-in-out;
    }
    p {
        position:relative;
        padding:0;
        top:50%; transform:translateY(-50%);
    }
    strong {
        display:inline-block;
        margin-bottom:10px;
    }
    time {
        color:#959595;
        font-size:14px;
    }

    &--infos-target {
        position:absolute;
        bottom:0;
        float:left;
        width:100%;
        height:50%;
    }
    &--infos-target:hover &--infos {
        opacity:1;
        top:-100%;
        height:200%;
    }

Answer 1

我对您的代码笔进行了编辑以使其正常工作。

基本上，我从 --infos-target 中取出 --infos 并使用 ~ 选择器在悬停时捕获它。这样，我就不必执行 top: -100%;高度:200% hack 了。

将其与 --infos 上的 pointer-events: none 相结合，您就可以开始了。

使用 z-index，您可以将目标定位在信息部分上方，一切顺利。

这里最大的问题是，由于 pointer-events: none

，您无法在信息部分中添加链接

http://codepen.io/anon/pen/XmLrgp

HTML

<div class="item">
    <img src="http://lorempicsum.com/futurama/960/250/1" alt="">
    <div class="item--infos-target">
    </div>
    <div class="item--infos">
        <p>
            <strong>Item title</strong>
            <br>
            <time datetime="2015-11-05 15:23:26" class="date">Added two weeks ago</time>
        </p>
    </div>
</div>

SCSS

.item {
    position:relative; width: 960px;
    &--infos {
        opacity:0;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        padding:0 10%;
        text-align:center;
        pointer-events: none;
             background:transparentize(#a7ecf8, 0.075);
        transition:opacity 200ms ease-in-out;
        z-index: 9;
    }
    p {
        position:relative;
        padding:0;
        top:50%; transform:translateY(-50%);
    }
    strong {
        display:inline-block;
        margin-bottom:10px;
    }
    time {
        color:#959595;
        font-size:14px;
    }

    &--infos-target {
        position:absolute;
        bottom:0;
        float:left;
        width:100%;
        height:50%;
        z-index: 10;
    }
    &--infos-target:hover ~ &--infos {
        opacity:1;
    }
}