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>

悬停的CSS标题？

1 个答案: