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

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

基本上，我从--infos中取出--infos-target并使用~选择器在悬停时抓住它。有了这个，我不再需要top: -100%; height: 200%黑客了。

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

使用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;
    }
}

Answer 2

我认为我们需要一些技巧。

首先我们需要隐藏＆＃34; div / image的前50％作为悬停点/触发器。

我们可以使用绝对定位的伪元素。

这意味着我们可以使用图像（而不是div）作为我们的悬停触发器... 但这会导致问题，因为叠加会停止悬停效果。我们可以使用pointer-events:none禁用该功能。

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  text-align: center;
}

.parent {
  display: inline-block;
  margin: 25px;
  position: relative;
  overflow: hidden;
}

.parent img {
  display: block;
}

.info {
  position: absolute;
  top:100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,0,0,.5);
  color:white;
  line-height: 72px;
  transition:top .25s ease;
  pointer-events:none;
  z-index:3;
}

.parent::before {
  content: '';
  position: absolute;
  top:0;
  left: 0;
  height: 50%;
  width: 100%;
  background: rgba(0,0,0,.5); /* for demo visual reference */
  z-index:2;
}

.parent img:hover ~ .info {
  top:0;
}

＆＃13;

<div class="parent">
  <img src="http://lorempixel.com/g/200/200" alt="" />
  <div class="info"><h3>Some Text</h3></div>
</div>

＆＃13;

CSS：将目标区域悬停在项目高度的50％处

2 个答案: