html - 如何在鼠标悬停后显示文本？

Question

我想知道如何在鼠标悬停在该区域上时显示文本。但是，我不希望文本在此之前出现。

目前，我将框创建为类似于按钮。我想知道是否有更好的方法来编写代码。

我附上了现在的照片和我想要的。(抱歉图片不好!)

谢谢!

当前:悬停前(当前):https://imgur.com/gallery/NeBxodJ悬停后(当前):https://imgur.com/gallery/4Hk598C

我想要的:悬停前(我想要的):https://imgur.com/gallery/lRAiPqc悬停后(我想要的):https://imgur.com/gallery/VCh0qeo

HTML:

<div class="sections">
  <section id="section_a" class="content-block" data-column-mode-sm="single" data-column-mode-xs="single"></section>
  <section id="section_b" class="content-block" data-column-mode-sm="single" data-column-mode-xs"single">
  <div class="container">
    <div id="row_1" class="row">
      <div id="column_a" class="column" data-xl-width="12">
        <div class="content-wrapper">
          <div id="content_1" class="column-content" data-module="portfoliogrid">
            <div id="masonry-content" class="masonry" style="position: relative; height: 506.25px;">
              <div class="masonry-item-width"></div>

              <!-- Project 1 -->
              <div id="project1" class="button button1" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:0%; top: 0%; opacity:1;">Typography</div>

              <!-- Project 2 -->
              <div id="project2" class="button button2" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:49.8664%; top: 0%; opacity:1;">Colour, Visual Language</div>

              <!-- Project 3 -->
              <div id="project1" class="button button3" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:0%; top: 253px; opacity:1;">UI/UX Case Study</div>

              <!-- Project 4 -->
              <div id="project2" class="button button4" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:49.8664%; top: 253px; opacity:1;">Display Work</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </section>
</div>

CSS:

.button {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 150px 200px;
  position: flex;
  font-family: 'Yantramanav', sans-serif;
  text-align: center;
  text-decoration: none;
  letter-spacing: 1.5px;
  font-size: 15px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 4px;
}

.button1 {
  background-color: #087084;
}

.button1:hover {
  background-color: #56b1bf;
  color: white;
}

Answer 1

有很多方法可以得到你想要的。这是一个简单的 html/css 示例:

div {
  background-color: #087084;
  padding: 50px;
}

div:hover {
  background-color: #56B1Bf;
}

span {
  visibility: hidden;
}

div:hover span {
  visibility: visible;
}

<div><span>Text</span></div>