how to make text change when you hover over it without it twitching?

css hover pseudo-element css-content
user2094719 picture user2094719 · Mar 18, 2013 · Viewed 7.5k times · Source

As I understand it, CSS can be used to change the content of an element on :hover in a basic way. I am using this code

HTML:

<button><span>3 replies</span></button>

CSS:

button {width:6em}
button:hover span {display:none}
button:hover:before {content:"Reply!"}

but when I hover over the button, it twitches very badly

I want mine to be smooth like the music player at this link

When you hover over one of the buttons under lease, premium, or trackout price, they switch over to the +add text

here is part of my player http://djwckd.com/test

Answer

Martin Atkins picture Martin Atkins · Mar 18, 2013

The important thing is to make sure that your layout does not change on hover. The easiest way to achieve this would be to allocate some space in your layout for all of the parts even when not hovering. I'm not sure what sort of layout you are trying to achieve but here is an example:

button { width: 6em }
button:hover span {display:none}
button:before { width: 100px; content: ""; }
button:hover:before {content: "Reply!"}

By giving the :before pseudo-element a size even when it's not hovered the layout shouldn't change when the content changes. You may need to adjust this for the specific layout you want but the general principle is to make sure all of the size-related properties are specified without :hover and then only adjust non-layout properties (that is, properties that don't affect any box sizes) in the :hover state.

Related questions

Transition only for the border on hover, but not for background

Here I have some CSS: #image-edges-beneath:hover{ background-color: blue; } #image-edges:hover{ background-color: blue; } #image-edges-beneat:hover:after{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; border: 2px solid #F1…

Read More
div background color, to change onhover

I'm trying to make a div's background color change on mouse over. the div {background:white;} the div a:hover{background:grey; width:100%; display:block; text-decoration:none;} only the link inside the div gets the background color. what could I …

Read More
Changing image on hover with CSS/HTML

I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn't change height and width and overlaps the other one. I'm …

Read More