CSS | テキストをマウスホバーで差し替える方法

2021-11-24CSS テキスト,CSS

CSSのみでテキストをマウスホバーで違うテキストに差し替える（置き換える）簡単な方法を紹介しています。

マウスホバーでテキストを差し替える

要素内にあるテキストをマウスホバー時に別のテキストに置き換える方法とそのサンプルコードになります。

See the Pen CSS | Display text in hover by yochans (@yochans) on CodePen.

HTMLはテキストを入れておくコンテナの親要素「container」をdivタグで、テキスト要素は２つのpタグを設置しています。

<div class="container">
	<p>With mouse hover</p>
	<p>Text replacement</p>
</div>

コンテナになる親要素「container」には「position: relative」を指定、テキスト要素のpタグには「position: absolute」で2つのpタグで作成するテキストが同じ場所に配置されるようにしています。

2つ目のpタグには「display: none」を指定しておき非表示にして、マウスホバー時に1つ目を「display: none」にして非表示になるようにし、2つ目を「display: block」にして表示するようにしています。

.container {
	position: relative;
	width: 100%;
	height: 3em;
	background: #000;
}

.container p {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	font-size: 20px;
	color: #FFF;
	font-weight: bold;
}

.container p:nth-child(2) {
	display: none;
}

.container:hover p:nth-child(1) {
	display: none;
}
.container:hover p:nth-child(2) {
	display: block;
}

ふわっと表示を入れ替えたい場合はコンテナ内のpタグに「transition: 1s」を追加すれば実装できます。

.container {
	position: relative;
	width: 100%;
	height: 3em;
	background: #000;
}

.container p {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	font-size: 20px;
	color: #FFF;
	font-weight: bold;
	transition: 1s;
}

.container p:nth-child(2) {
	display: none;
}

.container:hover p:nth-child(1) {
	display: none;
}
.container:hover p:nth-child(2) {
	display: block;
}

マウスホバーの検出は親要素である「container」に対して指定していますが、テキストに直接指定する事も可能です。
その場合、テキストの文字部分に触れないといけないので微妙な気もします。