Как проще заменить текст ссылки при наведении?

Рейтинг: 2Ответов: 1Опубликовано: 04.04.2015

#knpgh_a {
	display: block;
	width: 90%;
	height: 30px;
	margin-left: 8%;
	font-size: 16px;
	z-index: 9;
}
#knpgh_a2 {
	display: none;
	width: 86%;
	height: 30px;
	margin-left: 8%;
	font-size: 16px;
	margin-top: -30px;
}
.knpgh_a {
	color: black;
	text-decoration: none;
}
#knpgh_a:hover + #knpgh_a2{
	display: block;
	color: #415C7F;
}
#knpgh_a:hover {
	color: rgba(0,0,0,0.0);
}
<a href="" class="knpgh_a">
  <p id="knpgh_a">Североамериканское</p>
  <p id="knpgh_a2">Североамериканское кино</p>
</a>

Какими еще способами посоветуете воспользоваться для корректного отображения заменяемого текста? В примере выше - он моргает как бешенная пота*куха. Заранее спасибо!

css html hover текст display
Источник: Stack Overflow на русском

Ответы

▲ 6Принят

Всё гораздо проще:

a:hover .a {
  display: none;
}
a .b {
  display: none;
}
a:hover .b {
  display: inline;
}
<a href="#">
  <span class="a">text 1</span>
  <span class="b">text 2</span>
</a>