html - CSS 标题悬停？

Question

我的页面上有几个 div 框，当您将鼠标悬停在它们上面时，我想让它们显示文本。我正在看一些教程，但我似乎无法让它与我的一起工作，这是我的一个盒子的例子。

HTML:

  <div class="squar-1">
    <div class="text-1">
      <p>Hello</p>
    </div>
  </div>

CSS:

.squar-1 {
  width: 50%;
  height: 350px;
  background-color: #e57373;
  float: left;
}

.squar-1 .text-1 {
  position:relative;
  bottom:30px;
  left:0px;
  visibility:hidden;
}

.squar-1:hover .text {
visibility:visible;
}

Answer 1

行得通，你写的是 .text 而不是 .text-1

.squar-1 {
  width: 50%;
  height: 350px;
  background-color: #e57373;
  float: left;
}

.squar-1 .text-1 {
  position:relative;
  left:0px;
  visibility:hidden;
}

.squar-1:hover .text-1 {
  visibility:visible;
}

  <div class="squar-1">
    <div class="text-1">
      <p>Hello</p>
    </div>
  </div>

编辑:要转换文本，您应该使用不透明度而不是可见性，例如:

.squar-1 {
  width: 50%;
  height: 350px;
  background-color: #e57373;
  float: left;
}

.squar-1 .text-1 {
  position:relative;
  left:0px;
  opacity: 0;
  -webkit-transition: opacity 2s; /* For Safari 3.1 to 6.0 */
  transition: opacity 2s;
}

.squar-1:hover .text-1 {
  opacity: 1;
}

<div class="squar-1">
    <div class="text-1">
      <p>Hello</p>
    </div>
  </div>