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>