将鼠标悬停在一个 div 上会淡入另一个 div 顶部,并带有不透明度,并且一些文本在 div 内完全居中。这在所有浏览器中都可以正常工作,除了 Firefox 似乎。
这是一个 jsfiddle 演示:http: //jsfiddle.net/neal_fletcher/WHCNF/
HTML:
<div class="grid-block identity" style="background-image: url('http://placekitten.com/380/250');">
<div class="grid-block-text-hover-wrap">
<div class="grid-block-text-wrap">
<div class="grid-block-text-title">TITLE</div>
<div class="grid-block-text-subtitle">SUBTITLE</div>
</div>
</div>
</div>
CSS:
.grid-block {
position: absolute;
width: 380px; height: 250px;
margin-left: 25px; margin-right: 25px;
margin-bottom: 50px;
font-family: 'times';
text-align: center;
background: no-repeat 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
cursor: pointer;
display: table; vertical-align: middle;
}
.grid-block-text-hover-wrap {
position: absolute;
width: 100%; height: 100%;
background: rgba(0,0,0,0.75);
display: table;
vertical-align: middle;
}
.grid-block-text-hover-wrap .grid-block-text-wrap {
color: white;
}
.grid-block .grid-block-text-wrap {
display: table-cell; vertical-align: middle;
width: 100%; height: 100%;
}
.grid-block-text-wrap {
margin-left: 50px; margin-right: 50px;
}
.grid-block-text-title {
position: relative;
margin-top: 7px;
margin-bottom: 20px;
text-transform: uppercase;
}
.grid-block-text-hover-wrap .grid-block-text-title {
font-size: 16px;
line-height: 25px;
letter-spacing: 2px !important;
}
.grid-block-text-subtitle {
position: relative;
font-size: 12px;
letter-spacing: 2px !important;
text-transform: uppercase;
}
如您所见.grid-block-text-hover-wrap
,悬停时淡入淡出,但由于某种原因,在 Firefox 中,此 div 无法正确显示,并且未按应有的方式将文本居中。我不明白为什么会发生这种情况。任何建议将不胜感激!