Как изменить текст при наведении на него без него подергивания?

Question

Как я понимаю, CSS можно использовать для изменения содержимого элемента на :hover базовым способом. Я использую этот код

HTML:

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

CSS:

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

но когда я наведите курсор мыши на кнопку, она дергается очень плохо

Я хочу, чтобы мои быть гладкими, как музыкальный проигрыватель по адресу this link

Когда вы наведите указатель мыши на одну из кнопок u NDER lease, premium или trackout цена, они переключиться на +add текст

здесь является частью плеера http://djwckd.com/test

Answer 1

Важно, чтобы убедиться, что ваш макет не изменяется при наведении курсора мыши. Самый простой способ добиться этого - выделить некоторое пространство в макете для всех частей, даже если они не зависают. Я не уверен, какой макет вы пытаетесь достичь, но вот пример:

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

Давая :before псевдо-элемент размера, даже если он не парил макет не должен меняться, когда содержание изменения. Возможно, вам придется отрегулировать это для конкретного макета, но общий принцип заключается в том, чтобы убедиться, что все свойства, связанные с размером, указаны без:hover, а затем настраиваются только свойства не-макета (то есть свойства, которые не влияют на размеры ящиков) в состоянии :hover.

Answer 2

Как вы при условии, что ссылка парит фоновые изображения, но в тестовой ссылке, которую вы дали фоновые изображения, прежде чем <a> элементов, если вы хотите точно так же, как использование ссылок background-image: url('image1'); к a и background-image: url('image2'); к a:hover.

Вы все еще можете использовать позиционирование фоновых изображений, для этого вам должно быть так.

+--------------+ 
|    | position this background to a 
+--------------+ 
| + Add  | position this background to a:hover 
+--------------+ 

Ok! для этого сделайте свой фон 64px шириной и высотой 32 px. затем поместите свой фон в a{background-image: url('image') left top no-repeat; background-position: 0% 100%;}

Теперь поместите свой фон в

a:hover{background-position: 0% 0%;} 

Answer 3

Я думаю, что у меня есть решение. Трюк был одним из основных: установка ширины контейнера текста. Я также использовал onmouseenter вместо onmouseover для более быстрого изменения текста (моя теория о том, что onmouseenter быстрее, чем onmouseover). Вот пример:

var videoplayer = { 
 
    text: "<b>Hello World</b>", 
 
    author: "(you)" 
 
    }

<div onmouseenter="this.innerHTML = videoplayer.text;" onmouseleave="this.innerHTML = '<b>(hover over me)</b>';" style="background-color: red; padding: 10px; width: 110px; text-align: center; color: white;">(hover over me)</div>

Просто убедитесь, что вы установите ширину Div по ширине вам нужно.(Если вам не нужен фон, просто измените часть, в которой указан фоновый цвет: красный - фон-цвет: прозрачный). Еще одна вещь: вам нужно использовать div или другой контейнер с дисплеем: по умолчанию этот блок установлен. Я предлагаю использовать div. Надеюсь это поможет!