Question

我写了一些代码来创建带有一些文本的中途停留。现在我有两个问题：

1）我想把文本居中。 2）我想让停留成为一个环节。

由于我是CSS新手，我希望你能给我任何建议！

祝你好运！

.hover_div {
    position:relative;
    width:200px;
    height:200px;
}
.hover_div img {
    width:100%;
    vertical-align:top;
}
.hover_div:after {
    content: "";
    position: absolute;
    width:100%; height: 100%;
    top: 0; left: 0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.hover_div:before {
    content: attr(data-content);
    color:#fff;
    position:absolute;
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    z-index: 1;
}
.hover_div:hover:after {
    opacity:1;
}

.hover_div:hover:before {
    opacity:1;
}

<div data-content="Elektro" class="hover_div">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

Answer 1

我已在以下JSFiddle中更新了您的代码：https://jsfiddle.net/rvxo7fn5/

我已将以下行添加到:before：

text-align:center;
width: 100%;
margin-top:50%;
transform: translateY(-50%);

基本上，text-align: center;当然会将文本水平居中。但是，absolute定位的div没有宽度，这就是我添加width: 100%的原因。接下来，您需要垂直居中。 margin-top: 50%;将div移动父div的高度的50％。 transform: translateY(-50%)将div移回div本身高度的50％。这将它对齐在父级的中心。（父母身高的50％ - 儿童div的50％）。

您还提到希望它是一个链接。只需将<div>替换为<a>并将display: block;添加到.hover_div类，即可实现此目的。这给了它div所具有的属性。

希望有所帮助！

Answer 2

更新：悬停样式，如下所示。

.hover_div:hover:before 
{
    opacity:1;
    width:100%;
    text-align:center;
    text-decoration:underline;
    cursor:pointer;
}

Answer 3

您可以将<div>替换为<a>来进行链接。

.hover_div {
    position:relative;
    display: block;
    width:200px;
    height:200px;
}
.hover_div img {
    width:100%;
    vertical-align:top;
}
.hover_div:after {
    content: "";
    position: absolute;
    width:100%; height: 100%;
    top: 0; left: 0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.hover_div:before {
    content: attr(data-content);
    color:#fff;
    position:absolute;
    text-align: center;
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transform: translateY(-50%);
    z-index: 1;
    width: 100%;
    left: 0;
    top: 50%;
}
.hover_div:hover:after {
    opacity:1;
}

.hover_div:hover:before {
    opacity:1;
}

<a href="#" data-content="Elektro" class="hover_div">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</a>

Answer 4

可以通过添加left: 50%; top: 50%; transform: translate(-50%, -50%)来对文本进行居中。

伪元素如：after和：之前无法从DOM访问。因此无法建立链接。

.hover_div {
  position: relative;
  width: 200px;
  height: 200px;
}
.hover_div img {
  width: 100%;
  vertical-align: top;
}
.hover_div:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.hover_div:before {
  content: attr(data-content);
  color: #fff;
  position: absolute;
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.hover_div:hover:after {
  opacity: 1;
}
.hover_div:hover:before {
  opacity: 1;
}

<div data-content="Elektro" class="hover_div">
  <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

Answer 5

＆＃13;

.hover_div {
    position:relative;
    width:200px;
    height:200px;
}
.hover_div img {
    width:100%;
    vertical-align:top;
}
.hover_div:after {
    content: "";
    position: absolute;
    width:100%; height: 100%;
    top: 0; left: 0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    
}

.hover_div:before {
    content: attr(data-content);
    color:#fff;
    position:absolute;
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    z-index: 1;
    text-align:center;
    height:100%;
    width:100%;
    padding-top:50%;
}
.hover_div:hover:after {
    opacity:1;
}

.hover_div:hover:before {
    opacity:1;
}

＆＃13;

<div data-content="Elektro" class="hover_div">
   <a href="link here"><img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" /></a>
</div>

＆＃13;

CSS3：div中的中心文本（内容）：之前

5 个答案: