CSSは、マウスを線の上に置くと線全体の色を変える効果を実現します。

CSSは、マウスを線の上に置くと線全体の色を変える効果を実現します。

まとめ:

以下のように、CSS で指定した行にマウスを置いたときに行全体の色を変更する方法を示します。

実装のアイデア:

次の例に示すように、マウスがポイントされているときに背景色を変更するには、:hover 疑似クラスを使用します。

例:

マウスを下の div 上に置くと、それに応じて背景色が変わります。

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>Maomao チュートリアル (www.maomao365.com)</title>
<スタイル タイプ="text/css">
div{
  オーバーフロー:非表示;
  空白:折り返しなし;
  高さ:30px;
  幅:250px; 
  背景色:白;
  色:黒;
}
.divTest:hover{
  背景色:青;
  色:白;
}
</スタイル>
</head>
<本文>
<div class="divTest">div マウスを移動すると、背景色が変わります</div>
</本文>
</html>

要約する

上記は、マウスを置いたときに行全体の色が変わる効果を実現するためにエディターが紹介した CSS です。参考になれば幸いです。

<<:  HTML での select optgroup タグの使用の概要

>>:  クロスブラウザローカルストレージⅠ

推薦する

nginxリバースプロキシによるセッション障害の問題の解決策

同僚から助けを求められました。バックエンド システムへのログインは成功したものの、システムには正常に...

ドロップダウンメニューを実現するためのHTML+CSS

1. ドロップダウンリストの例コードは次のとおりです。 <!doctypehtml> ...

jsオブジェクトの読み取り速度の詳細な例

1. リテラルとローカル変数へのアクセスは最も高速ですが、配列要素とオブジェクト メンバーへのアクセ...

MySql 5.6.36 64 ビット グリーン バージョンのインストール グラフィック チュートリアル

MySQL のインストールについてはインターネット上に多くの記事がありますが、今日ノート PC にイ...

Html+CSS 描画三角形アイコン

まずはレンダリングを見てみましょう: XML/HTML コードコンテンツをクリップボードにコピー&l...

Linuxファイアウォールiptablesの詳細な紹介、設定方法と事例

1.1 iptablesファイアウォールの概要Netfilter/Iptables (以下、Ipta...

MySQLカスタム関数の原理と使用法の分析

この記事では、例を使用して MySQL カスタム関数の原理と使用方法を説明します。ご参考までに、詳細...

Reactコンポーネントをフルスクリーンにする方法

導入この記事は、 React + antdをベースにして、完全な全屏demoを紹介します。その理由は...

DockerでGDBを使用するときにブレークポイントを入力できない問題を解決する

質問docker で gdb を実行すると、ブレークポイントに到達しますが、ブレークポイントに入るこ...

Flexレイアウトを使用してヘッドの固定コンテンツ領域のスクロールを実現する方法

ページ ヘッダーの固定レイアウトは、以前は position:fixed を使用して実装されていまし...

html の img src="" で js 関数または js 変数を呼び出して、画像パスを動的に指定します。

この問題に関して、オンライン リソースをたくさん見つけました。ここにいくつかの方法を示します。コード...

複数の X 軸を使用して 7 日間の天気予報を実現するための Echarts サンプル コード

目次UIデザインEcharts の例の効果序文サンプルコード最終結果UIデザイン Echarts の...

JavaScript 履歴オブジェクトの説明

目次1. ルートナビゲーション2. 履歴状態管理API (1)ハッシュチェンジイベント(2)ポップス...

Vue 要素と Nuxt の使用に関するヒントを共有する

1. 要素時間選択提出フォーマット変換例えば 2018年9月7日金曜日 00:00:00 GMT+0...

MySQL カーソルの概念と使用法の詳細な説明

この記事では、例を使用して MySQL カーソルの概念と使用方法を説明します。ご参考までに、詳細は以...