CODEWITHSUNDEEP
htmlcss
Adam Griffiths
Adam Griffiths

Reputation: 782

Prevent text from moving on hover

The span appears when hovering over the container div, but it pushes the previous text to the left, how can I prevent that?

The height, width and border on the wrapper are just there to demonstrate the effect.

#wrapper {
  text-align: center;
  width: 500px;
  height: 200px;
  border: 1px solid black;
}

.element {
  display: inline-block;
}

.element > span {
  display: none;
}

.element:hover > span {
  display: inline;
}
<div id="wrapper">
  <div class="element">Some Sample Text <span>Some hovered text</span></div>
  <br>
  <div class="element">Some Sample Text <span>Some hovered text</span></div>
  <br> ...
</div>

Upvotes: 2

Views: 2155

Answers (1)

Stickers
Stickers

Reputation: 78786

You can set position: absolute; to the span, also add white-space: nowrap; to the container to prevent wrapping as needed.

#wrapper {
  text-align: center;
  width: 500px;
  height: 200px;
  border: 1px solid black;
}

.element {
  display: inline-block;
  white-space: nowrap; /* NEW */
}

.element > span {
  display: none;
  position: absolute; /* NEW */
}

.element:hover > span {
  display: inline;
}
<div id="wrapper">
  <div class="element">Some Sample Text <span>Some hovered text</span></div>
  <br>
  <div class="element">Some Sample Text <span>Some hovered text</span></div>
  <br> ...
</div>

Upvotes: 2

Related Questions