Мерцающий текст при наведении на эффект с использованием чистого CSS - PullRequest
Новая
       9

Мерцающий текст при наведении на эффект с использованием чистого CSS

1 голос
/ 06 октября 2019

Как видно из заголовка, когда я наведу курсор на основной текст, соответствующий текст сначала отображается внизу, а затем справа. Этот мерцающий эффект должен исчезнуть. Как мне это сделать?

DEMO: https://jsfiddle.net/h0nzojxg/

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

1 Ответ

1 голос
/ 06 октября 2019

вы можете использовать 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

Свойство CSS пустого пространства задает способ обработки пробела внутри элемента.

...