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

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

投稿日:2020年11月5日 更新日:

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

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

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

Web365とは

Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。

今回は、クライアントサイトをデザイン改善にあたり、対応したコーディング事例です。

Web365について詳しく知りたい方は「Web365とは」ご覧ください。

特定テキストにマウスが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制作+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までご相談ください。

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

執筆者:

関連記事

【提案事例】運営リソースが割けない場合のECサイトの展開案

【5分で読めます】 クライアント事例として、ECサイト(eコマース、つまりオンラインショップ)を開設したいけれど「運営リソースがほぼない」条件での展開案ついての提案事例を解説します。   Web365 …

【秒速解決】WordPressの管理画面が真っ白の対処法_サーバー【ロリポップ】

Word Pressのログイン画面だったり、管理画面が真っ白になってお手上げ、という事象があります。管理しているサイトで発生したので、対処解決方法を解説します。 Web365とは Web365は、外部 …

【体験】オンラインビジネスチャットサポートってなに?無料体験の流れと機能を解説

Webサイトの閲覧ユーザーの満足度をあげる機能「オンラインビジネスチャットサポート」、つまりチャットってどんなものなの?いちサービスを無料体験してみた流れと機能解説などしてみたいと思います。 Web3 …

イメージ00_【解説】WordPressの保守、プラグインのバージョン管理ができるWP Rollbackをいれておこう

【解説】WordPressの保守、プラグインのバージョン管理ができるWP Rollbackをいれておこう

【解説】WordPressの保守、プラグインのバージョン管理ができるWP Rollbackをいれ方を解説します。 クライアントサイトで対応例です。前提条件もありますが、プラグイン2つで対応します。 W …

WordPressの企業サイト事例

WordPressの企業サイト事例とテーマ選【徹底解説】

  【5分で読めます】 WordPressで企業サイト構築の検討に役立つ記事です。 WordPressで企業サイトを構築するメリット・デメリットやWordPressの企業サイトに向いてるか判断する7つ …

ALTタグ入力の方法

【Webマーケティング】画像検索一覧に表示させる方法なら、ALTタグ入力がおすすめ

ビジュアル商材を扱っているサイトですと画像検索からの流入も意識したいですね。どんな対策があるか知っていますか? そんなときは、画像のALTタグの入力がおすすめです。 ALTタグの入力で画像検索で自商材 …

検索上位へのSEO対策、画像にテキストは出来るだけいれないようにしよう

SEOを意識したサイト作りをする際に、画像とテキストは出来るだけ分けたほうがいいです。検索ロボットがテキストを認識して検索順位を決めるので、画像だと埋もれるからです。 今回は具体例と一般的な方法を解説 …