如何使文本出现在div内的悬停上？

Question

我试图在悬停时显示文本（带有一些样式）。我尝试使用 display:none;然后悬停显示：块；但这没有用。

<div class="container-fluid sub-head">
      <div class="row">
        <div class="col-md left">
          <div class="title">Title</div>
          <div class="overlay">
            <div class="overlay-content">
              <p>
                some text
              </p>
              <p>more text.</p>
            </div>
          </div>
        </div>
        <div class="col-md right">
          <div class="title">other title</div>
        </div>
      </div>
    </div>

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col-md {
  border: solid 1px #6c757d;
  height: 100px;
}

.overlay {
  height: 100%;
  display:none;
}

.overlay:hover {
  display: block;
}

小提琴在这里； http://jsfiddle.net/2dyvLf5o/14/

Answer 1

如果你想查看p元素的内容（更多文字），你应该为这个元素定义一个类名，并将悬停样式设置为它的父div，我也把title放在overlay div里面

enter code here

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col-md {
  border: solid 1px #6c757d;
}
.overlay{
   height:150px
}

.hidden-content {
  display: none;
}

.overlay:hover .hidden-content{
  display: block;
}

<div class="container-fluid sub-head">
  <div class="row">
    <div class="col-md left">
      <div class="overlay">
        <h1 class="title">Title</h1>
        <div class="overlay-content">
          <p>
            some text
          </p>
          <p class="hidden-content">more text.</p>
        </div>
      </div>
    </div>
    <div class="col-md right">
      <h1 class="title">other title</h1>
    </div>
  </div>
</div>

Answer 2

在父元素上使用:hover，如下所示：

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col-md {
  border: solid 1px #6c757d;
  height: 100px;
}

.overlay {
  height: 100%;
  display: none;
}

.row:hover .overlay {
  display: block;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid sub-head">
  <div class="row">
    <div class="col-md left">
      <div class="title">Title</div>
      <div class="overlay">
        <div class="overlay-content">
          <p>
            some text
          </p>
          <p>more text.</p>
        </div>
      </div>
    </div>
    <div class="col-md right">
      <div class="title">Other title</div>
    </div>
  </div>
</div>