Question

目前我在处理CSS和在徽标上使用悬停时遇到问题。

我有这个标志，当它悬停时，下方会出现一个文本正文，当然当移开时，此文本消失，徽标恢复正常。

问题在于，当隐藏此文本时，它仍占用页面空间，因此例如在移动设备上查看时，会有大量空白点，文本会在悬停时出现。

无论如何说要将此文本移动到屏幕的另一个点，或更改换行，以便它不占用此空间。在手机上滚动时，这些空白点非常明显。

我附上了一个例子并将图像和文字改为炸鸡，因为谁不喜欢用手指舔好东西。

.logo2 {
  width:100%;
  height:auto;
}

.logo2 {
  padding: 0px;
  margin: 0 auto;
  position: inline;
  display: block;
}

.logo__image2 {
  width: 100%;
  transition: transform .5s;
  height: auto;
}

.logo__text2 {
  color: #636059;
  font-size: 16px;
  font-weight: normal;
  font-family: Arial;
  text-align: justify;
  text-transform: normal;
  opacity: 0;
  transition: opacity .5s;
  position: inline;
  position: translateY(70px);
  bottom: 0;
  left: 0;
  right: 0;
}

.logo2 .img-responsive {
  margin: 0 auto;
}

.logo2:hover .logo__image2 {
  transform: translateY(-25px);
}

.logo2:hover .logo__text2 {
  opacity: 1;
  transform: translateY(550px);
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<div class="logo2">
  <nav>
    <a href="#"></a>
  </nav>
  <img class="logo__image2" src="http://blueribbonfriedchicken.com/wp-content/uploads/2015/06/honeyDrippin.png" />
  <span class="logo__text2">
    <p> In a large resealable plastic bag, combine 2-2/3 cups flour, garlic salt, paprika, 2-1/2 teaspoons pepper and poultry seasoning. In a shallow bowl, beat eggs and water; add salt and the remaining flour and pepper. Dip chicken in egg mixture, then place in the bag, a few pieces at a time. Seal bag and shake to coat.</p>
    <p>In a deep-fat fryer, heat oil to 375°. Fry chicken, several pieces at a time, for 5-6 minutes on each side or until golden brown and juices run clear. Drain on paper towels. Yield: 8 servings. </p>
  </span>
</div>

Answer 1

一些事情可以使文本占用零空间：

使文本元素显示：无（这使元素完全消失;无法使用CSS进行动画处理。）
根据您的使用情况制作文字元素line-height: 0或height: 0（可以使用CSS制作动画）。如果您也使用opacity: 0，该元素也会消失。
创建文本元素position: absolute，使其脱离正常的流程结构。您可以将其锚定到绝对，相对或固定父级（可以更动态地设置动画，但可能会变得复杂）。

这些是最常用的。欢迎其他人编辑此答案并添加到此列表中。

以JSFiddle形式解决提问者的问题：jsfiddle.net/v9swdxhj/2

注意：我删除了一些未使用的元素，包括一个未闭合的元素。留意那些！

使用CSS隐藏文字以不占用页面空间

1 个答案: