Question

我想在textarea上进行悬停效果：当鼠标悬停在该区域上时，我想在中心显示文本Available in Apple Store。这是HTML代码：

<section class="apps">
  <div class="container">
    <div class="row">
      <div class="media">
        <div class="app">
          <div class="content">
            ...
          </div><!-- content -->
        </div><!-- app -->
        <div class="media__body">
          <br>
          <a class="btn btn-lg btn-theme" target="_blank" href="www.google.fr">Available in Apple Store</a>
        </div>
      </div><!-- media -->
    </div><!-- row -->
  </div><!-- contaniner -->
</section>

这是CSS：JSBin。

正如您所看到的，在屏幕宽度不同的情况下，文字Available in Apple Store并不总是处于有利位置;当屏幕非常窄时，只显示该文本的一部分（我希望它被包裹）。

有谁知道如何修改它？

PS：是否可以使按钮始终垂直居中？

Answer 1

如果我正确理解了这个问题，你希望.btn居中并在它太长的时候换行吗？

如果是这种情况，您可以将此代码添加到CSS中。

.apps .media__body a.btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: pre-wrap;
  background: rgba(0,0,0,0.4);
}

以下是演示：

.apps {
  background-color: #fff;
  padding: 80px 0;
  font-weight: 300;
}
.apps .app {
  background: #fff;
  -webkit-background-clip: padding-box;
  border-top: 1px solid #75C181;
  border-left: 1px solid #75C181;
  border-right: 1px solid #75C181;
  border-bottom: 1px solid #75C181;
}
.apps .app .content {
  padding: 10px 15px;
}
.apps .media {
  display: inline-block;
  position: relative;
  vertical-align: top;
  margin-top: 30px;
}
.apps .media__body {
  background: rgba(0, 0, 0, 0.5);
  bottom: 0;
  color: white;
  font-size: 1em;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.apps .media__body:hover {
  opacity: 1;
  border-radius: 8px 8px 8px 8px;
}
.apps .media__body:after,
.apps .media__body:before {
  bottom: 1em;
  left: 1em;
  opacity: 0;
  position: absolute;
  right: 1em;
  top: 1em;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: 0.6s 0.2s;
  transition: 0.6s 0.2s;
}
.apps .media__body:before {
  border-bottom: none;
  border-top: none;
  left: 2em;
  right: 2em;
}
.apps .media__body:after {
  border-left: none;
  border-right: none;
  bottom: 2em;
  top: 2em;
}
.apps .media__body:hover:after,
.apps .media__body:hover:before {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.apps .media__body h2 {
  margin-top: 0;
}
.apps .media__body p {
  margin-bottom: 1.5em;
}
.apps .media__body a.btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: pre-wrap;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
}
.apps .btn-theme {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="apps">
  <div class="container">
    <div class="row">
      <div class="media">
        <div class="app">
          <div class="content">
            Proin scelerisque magna ac eros aliquam aliquam id in lacus. Morbi quam tortor, consequat at orci non, vulputate volutpat libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sagittis laoreet urna eu ornare.
            Aenean tempor, leo vel eleifend porttitor. Aenean tempor, leo vel eleifend porttitor, nibh libero ultricies est.
          </div>
          <!-- content -->
        </div>
        <!-- app -->
        <div class="media__body">
          <a class="btn btn-lg btn-theme" target="_blank" href="www.google.fr">Available in Apple Store</a>
        </div>
      </div>
      <!-- media -->
    </div>
    <!-- row -->
  </div>
  <!-- contaniner -->
</section>

希望这有帮助。

编辑

.apps .media__body有一些填充，删除它，它将适用于所有大小。

Answer 2

将此行CSS添加到您的按钮：

.btn {
    white-space: pre-wrap
}

这可确保文本在超出边界时被包装。

Answer 3

实现这一点相当容易，只需对btn-theme类使用以下行：

 position:relative;
 top:50%;
 transform:translateY(-50%);

始终将悬停文本显示在适当的位置

3 个答案: