メニューのホバー効果を実現するCSS3

メニューのホバー効果を実現するCSS3

結果:

html

<nav id="nav-1">
  <a class="link-1" href="#">ホーム</a>
  <a class="link-1" href="#">概要</a>
  <a class="link-1" href="#">お問い合わせ</a>
  <a class="link-1" href="#">ショップ</a>
</nav>

<nav id="nav-2">
  <a class="link-2" href="#">ホーム</a>
  <a class="link-2" href="#">概要</a>
  <a class="link-2" href="#">お問い合わせ</a>
  <a class="link-2" href="#">ショップ</a>
</nav>

<nav id="nav-3">
  <a class="link-3" href="#">ホーム</a>
  <a class="link-3" href="#">概要</a>
  <a class="link-3" href="#">お問い合わせ</a>
  <a class="link-3" href="#">ショップ</a>
</nav>

CS

url をインポートします(https://fonts.googleapis.com/css?family=Raleway);
体 {
  マージン: 0px;
}
ナビゲーション{
  上マージン: 40px;
  パディング: 24px;
  テキスト配置: 中央;
  フォントファミリー: Raleway;
  ボックスの影: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
#nav-1 {
  背景: #3fa46a;
}
#nav-2 {
  背景: #5175C0;
}
#nav-3 {
  背景: #EEA200;
}

.link-1 {
  遷移: 0.3 秒の緩和;
  背景: #3fa46a;
  色: #ffffff;
  フォントサイズ: 20px;
  テキスト装飾: なし;
  上境界線: 4px 実線 #3fa46a;
  下境界線: 4px 実線 #3fa46a;
  パディング: 20px 0;
  マージン: 0 20px;
}
.link-1:ホバー{
  上境界線: 4px 実線 #ffffff;
  下部境界線: 4px 実線 #ffffff;
  パディング: 6px 0; 
}

.link-2 {
  遷移: 0.6 秒;
  色: #ffffff;
  フォントサイズ: 20px;
  テキスト装飾: なし;
  border-right: 2px の点線透明;
  パディング: 30px 8px 0 10px;
  マージン: 0 10px;
}
.link-2:hover {
  右境界線: 2px 点線 #ffffff;
  パディング下部: 24px;
}
.link-3 {
  遷移: 0.4秒;
  色: #ffffff;
  フォントサイズ: 20px;
  テキスト装飾: なし;
  パディング: 0 10px;
  マージン: 0 10px;
}
.link-3:ホバー{
  背景色: #ffffff;
  色: #EEA200;
  パディング: 24px 10px;
}

上記は、CSS3 でメニューのホバー効果を実現する方法の詳細です。CSS3 メニュー ホバーの詳細については、123WORDPRESS.COM の他の関連記事をご覧ください。

<<:  HTML外部参照CSSファイルが効果を発揮しない理由の分析と解決

>>:  MYSQLストアドプロシージャコメントの詳細な説明

推薦する

setup+ref+reactive は vue3 の応答性を実装します

セットアップは、結合された API を記述するために使用されます。テンプレートが使用できるようにする...

MySQLのインストールと設定に関する詳細なチュートリアル

目次インストール不要のMySQLバージョン1. インストール パッケージをダウンロードします。 2....

Linux サーバーのステータスとパフォーマンスに関連するコマンドの詳細な説明

サーバーステータス分析Linux サーバーの CPU の詳細を表示する#CPU情報を表示[root@...

MySQL パーティション フィールド列に別のインデックスを作成する必要がありますか?

序文パーティション フィールドは主キーの一部でなければならないことは誰もが知っています。では、複合主...

MySQL 5.7.18 インストーラーのインストール ダウンロード グラフィック チュートリアル

この記事では、MySQL 5.7.18インストーラーの詳細なインストールチュートリアルを参考までに記...

実用的なウェブオンラインツール12選

1.ファビコン.cc ico アイコンの Web サイトをオンラインで作成するには、画像をアップロー...

Linux 上での Go 環境の構築のインストールと設定の説明

Linux で Go 環境を構築するのは非常に簡単です。 1. go1.2.1.linux-386....

Linux カーネル デバイス ドライバー仮想ファイル システムに関する注意事項

/******************** * 仮想ファイルシステム VFS **********...

CSS はモバイル デバイスで水平スクロール ナビゲーション バーを実装します (PC デバイスにも適用可能)

関数の起源最近、水平スクロール バーを必要とする H5 に取り組んでいました。いくつかのドキュメント...

MacでNodeとnpmを完全にアンインストールする方法

npmアンインストール sudo npm アンインストール npm -g この文に遭遇して npm ...

Vueは複数のカウントダウンを同時に設定する機能を実装しています

この記事の例では、複数のカウントダウンを同時に設定するためのVueの具体的なコードを参考までに共有し...

ヘッダーのチェックボックスをテキスト実装コードに変更するための選択テーブルを持つ要素

方法1: テーブル属性を使用する: header-cell-class-name テーブルインターフ...

Linux カーネル デバイス ドライバー proc ファイル システム ノート

/***************** * proc ファイルシステム***************...

MySQL で binlog を使用する際のフォーマットの選択方法

目次1. binlogの3つのモード1.ステートメントレベルモード2. 行レベルモード3. 混合モー...

Vue はシームレスなカルーセル効果を実現

この記事では、シームレスなカルーセル効果を実現するためのVueの具体的なコードを参考までに紹介します...