Question

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

这方面的一个很好的例子是：

http://issuu.com/

如果向下滚动并将鼠标悬停在任何出版物图像上，它将显示一个半透明的叠加层，其中包含＆＃34;立即阅读＆＃34;完全在垂直和水平方向上对齐。无论是徘徊还是徘徊都在徘徊。

我正在努力实现这一点。

谢谢

Answer 1

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 2

以下是使用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 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％height＆amp;内的垂直对齐跨度悬停时固定宽度（包括示例）

3 个答案: