div 内的垂直对齐跨度 @ 悬停时 100% 高度和固定宽度（包括示例）

Question

我正在尝试实现一个隐藏的元素，该元素在悬停时显示在高度未知的 div 上。

这里有一个完美的例子：

http://issuu.com/

如果您向下滚动并将鼠标悬停在任何出版物图片上，它会显示一个半透明的覆盖层，上面的文字 "read now" 在垂直和水平方向上都完美居中对齐。在悬停时淡入淡出。

我正努力做到这一点。

谢谢

Answer 1

这是一个使用 flexbox 的简单示例：http://jsfiddle.net/hj3gfwuk/

你的html：

<div class="parent">
    <div class="child">
        <p>Read now.</p>
    </div>
</div>

你的css：

html, body { height: 100%; }

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgrey;
  position: relative;
  height: 50%;
  width: 50%
}

.child {
    display: none;
    background-color: rgba(255,255,255,.5);
    height: 100%;
    width: 100%;
}

.parent:hover .child {
    display: flex;
    justify-content: center;
    align-items: center;
}

基本思路：子元素（隐藏元素）的高度和宽度为父元素的 100%，背景具有一定的透明度。它最初用 display: none; 隐藏当您将鼠标悬停在 .parent 上时，.child 的 css 会更改，并显示该元素。希望这对您有所帮助！

Answer 2

Working Fiddle

这是我使用纯 html 和 css 的实现：

HTML

<div class="content">
    Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.
    <div class="hiddenElement"></div>
    <div class="textElement">Read Now</div>
</div>

CSS

.content{
    width:200px;
    height:300px;
    background:#ccc;
    position:relative;
}
.hiddenElement,.textElement{
     position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
    text-align:center;
    display:none;
}
.hiddenElement{

    background:#fff;
    opacity:0.6;
}
.textElement{
    opacity:1;
    top:50%;
}
.content:hover .hiddenElement,.content:hover .textElement{
    display:block;
}

希望对你有帮助

Answer 3

@pgruber 解决方案在我的 Internet Explorer 中不起作用。
在@devendrant 解决方案中，他正在修复 line-height: 300px; 或者问题是 div that the height is unknown. 试试这个演示：jsfiddle

html:

<div class="content">
    <img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"/>
    <div class="overlay">
    <span>Read more</span>
    </div>
</div>

css:

div.content{
    position:relative;
}
div.content:hover div.overlay{
    display:block;
}
div.overlay{
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    top: 0;
    left: 0;
    color: #000;
    background-color: rgba(255,255,255,0.7);
}
div.overlay span{
    top: 50%;
    left:50%;
    position: absolute;
    margin-top: -9px;
    margin-left: -35px;
}

div 内的垂直对齐跨度 @ 悬停时 100% 高度和固定宽度（包括示例）

Vertical-align span inside div @ 100% height & fixed width on hover (example included)

html

css

jquery

hover

vertical-alignment