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

Question

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

<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;
}

fiddle 在这里； http://jsfiddle.net/2dyvLf5o/14/

Answer 1

在父元素上使用 :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>

Answer 2

如果您想查看 p 元素的内容（更多文本），您应该为该元素定义一个 class 名称并为其设置悬停样式 parent div , 我也把标题放在 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>

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

How to make text appear on hover within a div?

html

css

hover