なぜこのような効果を実現するのでしょうか。実は、この効果もタイトルプロンプトから派生したものですが、元のものが醜いため、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 を応援していただければ幸いです。 |
>>: Virtualbox に Centos7 仮想マシンをインストールする詳細なグラフィック チュートリアル
背景色と透明度の設定上記のように、最初の画像の場合は、灰色の背景と左上隅に白い「カバー」という文字を...
目次1. sysbenchの紹介#プロジェクトダウンロードアドレス: 2. Sysbenchのインス...
この記事では、参考までにMySQL 8.0.15のインストールと設定方法のグラフィックチュートリアル...
目次DockerにRedisをインストールする1. Redisイメージを見つける2. Redisイメ...
シリアル化の実装InnoDB は 2 つの方法でシリアル化を実装します。まず、SELECT 文が明示...
目次1. 実行コンテキストとは何か2. 実行コンテキスト スタックとは何ですか? 3. 実行コンテキ...
状況は以下のとおりです: (PS: 赤いボックスは iframe 領域を表し、灰色の四角形は上記の ...
ここでは主に、WeChat アプレットでラッキーホイール ゲームを開発する方法を紹介します。主に J...
vue-無限スクロールインストール npm インストール vue-infinite-scroll -...
目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...
昨年の前半から開発と娯楽のために Linux を使い始めましたが、今では Windows には戻れま...
1. golang:最新のベースイメージ mkdir gotest タッチメイン.go Docker...
この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。...
PCIE には 4 つの異なる仕様があります。下の図でそのうちの 2 つを見てみましょう。マザーボー...
目次パーサーとプリプロセッサクエリオプティマイザーMySQL クエリの最適化には、解析、前処理、最適...