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

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

推薦する

MySQL の instr を使用したファジー クエリ メソッドの紹介

MySQL の内部関数instrを使用すると、従来の like クエリ メソッドを置き換えることがで...

Linux FTP匿名アップロードとダウンロードが自動的に開始される問題を解決する

勉強や仕事で FTP サーバーを頻繁に使用する場合は、起動時に自動的に起動するように設定できます。設...

MyBatisインターセプターのページング機能を実装する方法

MyBatisインターセプターのページング機能を実装する方法序文:まず、実装原則についてお話しします...

ドロップダウンメニューを実装するためのネイティブ js

ドロップダウン メニューも実生活では非常に一般的です。実装に使用される js コードは、タブ選択やア...

JavaScript でツリー構造を構築するための効率的なアルゴリズムについての簡単な説明

目次導入アイデアID配列インデックスのマッピング関係を確立するツリー構造の構築原理要約する導入組織階...

mysql はインデックスを無効にしますか?

mysql の IN はインデックスを無効にしますか?しませんよ! 結果をご覧ください: mysq...

1つの記事でTypeScriptのデータ型について学ぶ

目次基本タイプあらゆるタイプ配列タプルインタフェース関数自己推論を入力する結合タイプ(1つ以上選択)...

Mysql8.0はソート問題を解決するためにウィンドウ関数を使用する

MySQL ウィンドウ関数の紹介MySQL は MySQL 8.0 以降、ウィンドウ関数をサポートし...

MySQL マスター/スレーブ データベース同期構成と一般的なエラー

アクセス回数が増えると、時間のかかるデータベース読み取り操作では、データベースへの負荷を軽減するため...

docker を使って sonarqube を構築する方法

目次1. Dockerをインストールする2. ソナーイメージをインストールする3. ソナーを使ってコ...

Linux 継続的インテグレーションで Maven を自動的にインストールする方法

Mavenパッケージを解凍する tar xf apache-maven-3.5.4-bin.tar....

Mac で MySQL 8.0.22 のパスワードを取得する方法

Mac 最新バージョンの MySQL 8.0.22 パスワード回復問題の説明:昨日、突然、Macで最...

ウェブデザインにおけるグリッドシステム

グリッドシステムの形成1692年、新しく即位したフランス国王ルイ14世は、フランスの印刷技術のレベル...

JavaScriptはランダムコードの生成と検証を実現する

JavaScriptでのランダムコードの生成と検証は参考までに。具体的な内容は以下のとおりです。イベ...

Docker に ElasticSearch 6.x をインストールする詳細なチュートリアル

まず、イメージをプルします(またはコンテナを作成するだけで、自然にプルされます)。 docker p...