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 タグの使用の概要

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

推薦する

CocosCreatorを使ってシューティングゲームを作る方法

製造手順を分析します。 1. リソースを準備してシーンを構築するオンラインでリソースを探すか、私のリ...

Alibaba Cloudのセキュリティルール設定の詳細な説明

2日前、ダブル11ショッピングフェスティバルを利用して、Alibaba CloudでECS(サーバー...

IDEA に基づいて Tomcat サーバーを展開するための詳細な手順

目次導入ステップ1ステップ2: アイデアで動的Webプロジェクトを作成するステップ3: Tomcat...

MySQL 接続制御プラグインの紹介

目次1. 接続制御プラグイン(connection_control)の紹介1.1 connectio...

HTML要素によるFlashブロックの詳細な例

コードをコピーコードは次のとおりです。 wmode パラメータ:透過モード: z-indexを使用し...

Nginx でバージョン番号を隠す方法

Nginx はバージョン番号を非表示にする実稼働環境では、セキュリティ上の脆弱性の漏洩を避けるために...

Dockerでイメージをプルするための手順を完了する

1. Docker pullはイメージをプルします$ docker pull {IMAGE_NAME...

MySQL実践スキル: 2つのテーブルに異なるデータがあるかどうかを比較する方法の分析

この記事では、MySQL が 2 つのテーブルを比較して、異なるデータがあるかどうかを確認する方法を...

IE6/7 における a.getAttribute(href,2) 問題の分析と解決

簡単な説明<br />IE6および7では、一般的なaタグ(HTMLで記述され、DOM操作...

CSS シャドウアニメーションの最適化のヒント

このテクニックは、この記事から来ています - シルキーでスムーズなパフォーマンスでボックスシャドウを...

MySQL が「operate_time」エラーのデフォルト値が無効であると報告する問題を解決する

データベースでcreate tableステートメントを実行する テーブル `sys_acl` を作成...

ウェブサイトを黒、白、グレーにする4つのコードの詳細な説明

2008年5月12日に四川省汶川市で発生した地震により、多くの命が失われ、遺憾なことと存じます。国務...

Windows 10 での MySQL 8.0.12 解凍バージョンのインストール グラフィック チュートリアル

この記事は、MySQL 8.0.12解凍版のインストールグラフィックチュートリアルを記録しています。...

MySQL 文字セットの概要

目次文字セット比較ルール4つのレベルの文字セットと比較規則3つのシステム変数このノートは主にMySQ...

Visual Studio Codeを使用してMySqlデータベースに接続し、クエリを実行します。

Visual Studio Code は、Microsoft が開発した強力なテキスト エディター...