CSS コンテンツ属性を使用して、マウスホバープロンプト (ツールチップ) 効果を実現します。

CSS コンテンツ属性を使用して、マウスホバープロンプト (ツールチップ) 効果を実現します。

なぜこのような効果を実現するのでしょうか。実は、この効果もタイトルプロンプトから派生したものですが、元のものが醜いため、jquery-ui のツールチップ、Bootstrap のツールチップなど、このような派生プラグインが多くあります。また、プラグインライブラリも多数あります。

場合によっては、これほど大きなプラグイン ライブラリは必要ありません。実際、ツールチップを 1 つか 2 つの場所に作成するだけでよいので、CSS コンテンツ プロパティと :before および :after 疑似要素を使用して、生成されたコンテンツを挿入できます。

効果は次のように確認します

HTMLコードは次のとおりです

<a class="dui-tips" data-tooltip="私は 3cbest.com のヒントです">w3cbest.com</a>

「data-」はカスタム属性です。たとえば、カスタム プロンプト data-tooltip="I am a 3cbest.com prompt" などです。コンテンツの attr を使用して、before および after content と組み合わせてカスタム プロンプトを呼び出します。attr(data-tooltip);

content: attr は簡単に理解できます。jq の .attr() を知っていれば、それが何を意味するかはわかります。この例では、content: attr を使用して、データ ツールチップの値を取得します。

CSSコード

.dui-ヒント {
位置: 相対的;
表示: インラインブロック;
カーソル: ポインタ;
}
 
.dui-tips[データツールチップ]:after、
.dui-tips[データツールチップ]:before {
可視性: 非表示;
位置: 絶対;
上位: 50%;
左: 100%;
遷移: すべて .3;
}
 
.dui-tips[データツールチップ]:after {
 
コンテンツ: attr(データツールチップ);
変換: translate(-5px, -50%);
空白: 前;
パディング: 5px 10px;
背景色: rgba(0, 0, 0, 0);
色: rgba(255, 255, 255, 0);
}
 
.dui-tips[データツールチップ]:before {
コンテンツ: '';
高さ: 0;
幅: 0;
変換: translate(-10px, -50%);
境界線の幅: 5px 5px 5px 0;
境界線のスタイル: solid;
境界線の色: 透明 rgba(0, 0, 0, 0) 透明 透明;
}
.dui-tips:hover:after、.dui-tips:hover:before {
遷移: すべて .3;
可視性: 可視;
 
}
.dui-tips:hover:after {
色: rgba(255, 255, 255, 1);
背景色: rgba(0, 0, 0, 0.8);
変換: translate(5px, -50%);
}
 
.dui-tips:hover:before {
境界線の色: 透明 rgba(0, 0, 0, 0.8) 透明 透明;
変換: translate(0px, -50%);
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQL InnoDB ロックの概要

>>:  Virtualbox に Centos7 仮想マシンをインストールする詳細なグラフィック チュートリアル

推薦する

Vueで背景色と透明度を設定する方法

背景色と透明度の設定上記のように、最初の画像の場合は、灰色の背景と左上隅に白い「カバー」という文字を...

MySQL パフォーマンス ストレス ベンチマーク ツール sysbench の使い方の紹介

目次1. sysbenchの紹介#プロジェクトダウンロードアドレス: 2. Sysbenchのインス...

Windows での MySQL 8.0.15 のインストールと設定方法のグラフィック チュートリアル

この記事では、参考までにMySQL 8.0.15のインストールと設定方法のグラフィックチュートリアル...

DockerにRedisコンテナをインストールするための実装手順

目次DockerにRedisをインストールする1. Redisイメージを見つける2. Redisイメ...

InnoDB がシリアル化分離レベルを実装する方法

シリアル化の実装InnoDB は 2 つの方法でシリアル化を実装します。まず、SELECT 文が明示...

JavaScript の実行コンテキストとコールスタックの詳細な説明

目次1. 実行コンテキストとは何か2. 実行コンテキスト スタックとは何ですか? 3. 実行コンテキ...

IE6 の iframe の水平スクロール バーの解決策

状況は以下のとおりです: (PS: 赤いボックスは iframe 領域を表し、灰色の四角形は上記の ...

WeChatアプレットでラッキーホイールゲームを実装する方法

ここでは主に、WeChat アプレットでラッキーホイール ゲームを開発する方法を紹介します。主に J...

Vue スクロールダウンしてさらにデータを読み込む スクロールケースの詳細な説明

vue-無限スクロールインストール npm インストール vue-infinite-scroll -...

JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明

目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...

効率をN倍に高めるVimクイックリファレンステーブル15個

昨年の前半から開発と娯楽のために Linux を使い始めましたが、今では Windows には戻れま...

GoのDockerデプロイメント用の基本イメージ2つの実装

1. golang:最新のベースイメージ mkdir gotest タッチメイン.go Docker...

JS を使用して航空機戦争の小さなゲームを実装する

この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。...

Linux で PCIe のバージョンと速度を確認する方法

PCIE には 4 つの異なる仕様があります。下の図でそのうちの 2 つを見てみましょう。マザーボー...

MySQLクエリ最適化プロセスを理解する

目次パーサーとプリプロセッサクエリオプティマイザーMySQL クエリの最適化には、解析、前処理、最適...