使用纯 CSS 的悬停效果闪烁文本

Question

正如标题所暗示的，当我将鼠标悬停在正文上时，相应的文本先显示在底部，然后显示在右侧。这种闪烁效果需要消失。我该怎么做？

HTML

<div class="grow">
  <div>
    <a href="">
      <h2>Title 1</h2> 
      <p>Contrary One</p>
    </a>
  </div>
  <div>
    <a href="">
      <h2>Title 2</h2> 
      <p>Contrary Two</p>
    </a>
  </div>
  <div>
    <a href="">
      <h2>Title 2</h2> 
      <p>Contrary Two</p>
    </a>
  </div>
</div>

CSS:

h2, p, a {
  display: inline;
  text-decoration: none;
  color: #fff;
}
a:hover {
  text-decoration: underline;
}
.grow {
  position: relative;
  background-color: #2a75a9;
  padding: 5px 5px 5px 5px;
  border-radius: 10px;
  width: 100px;
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
  text-align: left;
}
.grow>div {
  min-height: 50px;
}
.grow p {
  opacity: 0;
}
.grow:hover p {
  opacity: 1;
}
.grow:hover {
  width: 245px;
}

Answer 1

您可以使用 white-space 将所有内容放在一行中：https://jsfiddle.net/k0cwuzx4/

h2,
p,
a {
  display: inline;
  text-decoration: none;
  color: #fff;
}

a {
  white-space: nowrap;
}

a:hover {
  text-decoration: underline;
}

.grow {
  position: relative;
  background-color: #2a75a9;
  padding: 5px 5px 5px 5px;
  border-radius: 10px;
  width: 100px;
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
  text-align: left;
}

.grow>div {
  min-height: 50px;
}

.grow p {
  opacity: 0;
}

.grow:hover p {
  opacity: 1;
}

.grow:hover {
  width: 245px;
}

<div class="grow">
  <div>
    <a href="">
      <h2>Title 1</h2>
      <p>Contrary One</p>
    </a>
  </div>
  <div>
    <a href="">
      <h2>Title 2</h2>
      <p>Contrary Two</p>
    </a>
  </div>
  <div>
    <a href="">
      <h2>Title 2</h2>
      <p>Contrary Two</p>
    </a>
  </div>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

The white-space CSS property sets how white space inside an element is handled.

使用纯 CSS 的悬停效果闪烁文本

Flickering text on hover effect using pure CSS

css

css-transitions