特定テキストにマウスがhoverしたときに、背面に関連の文字を出したいときってありませんか？
少しのCSSでサクッと対応できます。もちろんコピペできます。
特定テキストにマウスがhoverしたときに背面に文字を出すCSSの方法を解説します。
Web365とは
Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。
今回は、クライアントサイトをデザイン改善にあたり、対応したコーディング事例です。
Web365について詳しく知りたい方は「Web365とは」ご覧ください。
この記事でわかること
サンプル
マウスをhoverさせると、背景に文字「hover」とでます
実装コード
上位の
HTML
<p class="hover-text" data-text="hover">マウスほhoverさせると、背景に文字が出る</p>
CSS
.hover-text{
position:relative;
z-index: 1;
}
.hover-text:hover:after {
content: attr(data-text)"";
position: absolute;
top: 0;
left: 0;
font-size:2em;
color: #FFF100;
z-index: -1;
}
解説
HTML、
<p class=”hover-text” data-text=”hover”>マウスほhoverさせると、背景に文字が出る</p>
冒頭のpタグ、属性に、data-text=”hover”、を記述すると、この文字が背景に出るよう文字になります。
どう出すか？CSSです。
CSS、
CSSでのhoverのセレクタは下記、
.hover-text:hover:after {
のように記述することで、
クラス要素にhoverしたとき、疑似要素であるafterを追加させることができます。
また、
.hover-text:hover:after {
content: attr(data-text)””;
についてですが、
のafterのプロパティであるcontent: に、
attr(data-text)””;と記述することで、
先のPタグの属性data-textに記述した文字列を取得することができます。
疑似要素の文字を背景に出すか、前面に出すかは、
プロパティのz-index:
で指定します。
hover-text自体は、前面にするため、
.hover-text{
position:relative;
z-index: 1;
}
と記述し、
hover-text:hover:afterを、背面にするため、
.hover-text:hover:after {
z-index: -1;
}
と記述してます。
背面文字の位置は、
各プロパティのposition:
で指定し、
top:
left:
で位置調整します。
position: は
親要素に対して、子要素の位置関係を指定する。
top:
left:
は、親要素左上部からどのくらいに配置するか？
という指示です。
カスタマイズは各プロパティを調整しましょう。
以上です。ご活用ください。
Web制作+Webマーケティングの個別講座開講中
Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております
・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
・Googleアナリティクスの設定、分析から改善施策の立案、レポート作成まで自身でしたい方
どうぞWeb365の「Webサイト制作、Webマーケティングの知識スキル習得するためのオーダーメイド個別講座」をご覧ください。
外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。
Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています
・成果にこだわるサイト制作改善をお望みの方
・自社にとって最適なweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方
是非Web365までご相談ください。
【パートナー募集】
Web制作、Webコンサル、広告代理店、フリーランスの方々へのWeb改善プランの提供
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング、Web改善のプラン検討している方
・社内のWebマーケティングのリテラシーを高めたい方
・分析から改善運用まで一括でサポート依頼したい方
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング提案がしたいプラン作成をサポート
・クライアントへのWeb改善プラン実行のディレクションサポート
・社内のGoogleアナリティクスなどのレクチャー
・クライアントへのサイト分析から改善運用企画のアドバイザリーサポート
・Web系フリーランスへのWeb改善プランの提案企画書の作成サポート
・クライアントへのWeb広告運用代行
・クライアントへの計測ツール設定代行（Googleアナリティクス、eコマース、ヒートマップClarityなど）
まずは、お気軽にMTGでれきばと思いますので、Web365までご相談ください。
