CSS3 マウスオーバーテキストタイトルは、対応するコンテンツコードを切り替えます

これは、ユニークでクリエイティブな CSS3 マウスオーバーテキストタイトル切り替え対応コンテンツコードで、インタラクティブな切り替え効果が非常に優れており、Q&A 表示に使用できるアニメーション特殊効果もあります。

<title>css3 テキストのタイトルをマウスオーバーすると、対応するコンテンツ コードが切り替わります</title>

<link type="text/css" rel="stylesheet" href="css/style.css">

</head>

<本文>

<div class="デモ">
<div class="demo__content">
<h2 class="demo__Heading">どのようなページ レイアウトが好きですか? </h2>
<div class="demo__elems">
<div class="demo__elem Demon__elem-1">シンプルなマルチテキスト レイアウト</div>
<div class="demo__elem Demon__elem-2">グラフィックとテキストのレイアウトが混在する 1 列</div>
<div class="demo__elem Demon__elem-3">2 列のグラフィックスとテキスト レイアウト</div>
<span class="demo__hover Demon__hover-1"></span>
<span class="demo__hover Demon__hover-2"></span>
<span class="demo__hover Demon__hover-3"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">シンプルなマルチテキスト レイアウト</div>
& Lt; div クラス = "demo__elem" & gt; <div class="demo__elem">グラフィックとテキストのレイアウトが混在する 2 列</div>
</div>