WordPressでホームページを作るには

【コピペ】特定テキストにマウスがhoverしたときに背面に文字を出すCSS

投稿日:

特定テキストにマウスがhoverしたときに、背面に関連の文字を出したいときってありませんか?

少しのCSSでサクッと対応できます。もちろんコピペできます。

特定テキストにマウスがhoverしたときに背面に文字を出すCSSの方法を解説します。

特定テキストにマウスがhoverしたときに背面に文字を出すCSS

サンプル

マウスを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担当者として月額サポートします。

Web365は貴社のWeb担当者として、制作改善運用をワンストップ定額サポートしています

・成果にこだわるサイト制作改善をお望みの方
・良いweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方


是非Web365までご相談ください。






Web制作+Webマーケティングの個別講座開講中

Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております


・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方


どうぞWeb365の個別講座をご覧ください。

WordPressでホームページを作るには

執筆者:

関連記事

WordPressで特定カテゴリーのみ一覧から非表示にする方法

WordPressで特定カテゴリーのみ一覧から非表示にする方法を解説します。 クライアントさんのサイトで、記事の続編など似た記事が一覧にあると少しうるさくなっていたので、続編カテゴリーの記事は一覧から …

【簡単】WordPressで独自のショートコードを作成し、本文に挿入する方法

WordPressで独自のショートコードを作成し、本文に挿入する方法を解説します。お決まりの文章や、機能などは、ショートコードを書くだけで、ページに実装できると効率的です。ショートコードの作成方法と、 …

【解説】EC機能内製化の検討例と7.27%のコストカット試算事例

クライアント事例として、自サイトでEC機能(eコマース、つまりオンラインショップ)内製したいときのリニューアル検討についての調査と意思決定についての流れを解説します。 この記事で分かることは、 自サイ …

WordPressで「更新を失敗しました」と出たときの対応方法

WordPressの編集時に更新を押すと、「更新を失敗しました」と出たときの対応方法について解説します。 対応方法は検索すると色々出てきますが、主要な原因では、 WordPress新エディタ「Gute …

【簡単】商材ページ、13のポイントを意識して簡単につくる方法

クライアントサイトで、実際にコンテンツ作成するときに、重要なページ商材ページがあります。 どんな構成で作成すると良いのか? 商材自体の訴求ポイントの項目と、Webコンテンツとしての構成面と合わせて、1 …

【1分コピペ】Word PressでJavaScriptのファイル読み込みさせるときの方法

Word PressでJavaScriptのファイルを読み込みさせたいときは制作改善しているとよくあります。その方法を解説します。 【1分コピペ】Word PressでJavaScriptのファイル読 …

Androidで確認するとサイトの右にできる余白を消す方法

iPhoneでは普通のサイトもAndroidで確認するとサイトの右に余白ができることがあります。今回はその解消方法です。 調べると3つほど解決法があります。 min-widthを指定してみる view …

^
;