メニューのホバー効果を実現する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ストアドプロシージャコメントの詳細な説明

推薦する

HTML テーブル マークアップ チュートリアル (48): CSS で変更されたテーブル

<br />では、CSS 構文を巧みに使用してテーブルを美しくする方法を見てみましょう。...

Linux での MySQL 5.7.18 yum のアンインストールからインストールまでのプロセスの図

いろいろ苦労しましたが、やっと yum インストールの手順がわかりました。以前、バイナリ パッケージ...

JavaScript シングルスレッドと非同期の詳細

目次1. タスクキュー2. 混乱を招く問題を説明する1. setTimeout(f1,0)とは何です...

CSS3 で背景の透明化と不透明テキストを実装するサンプルコード

最近、画像上に半透明の背景でテキストを表示する必要があるという要件に遭遇しました。その効果は次のよう...

Vueプロジェクトでのトークン検証ログイン(フロントエンド部分)

この記事の例では、Vueプロジェクトでのトークン検証ログインの具体的なコードを参考までに共有していま...

HTMLからPDFへの変換のための純粋なクライアント側と純粋なサーバー側の実装ソリューション

必要ユーザーがフォームに入力して「保存」をクリックすると、PDF ドキュメントを直接ダウンロードでき...

Vue のプラグインとコンポーネントの違いと使い方のまとめ

このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...

HTML 適応テーブル方式

<body style="scroll:no"> <テーブルの...

LINUX でポートが占有されているかどうかを確認する方法

ポートが占有されているかどうかは、これまで一度もわかりませんでした。多くの人に尋ねて、ようやくわかり...

MySQL5.7 マスタースレーブ構成例の分析

MySQL5.7マスタースレーブ構成の実装方法、具体的な内容は次のとおりですインストール環境:マスタ...

MySQL 接続例外とエラー 10061 の解決方法

MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...

Vue3.xはコンポーネント通信にmitt.jsを使用します

目次クイックスタート使い方基本原則Vue2.x はコンポーネント通信に EventBus を使用しま...

node.js でマルチコア CPU を最大限に活用する方法

目次概要node.js でマルチコア CPU を最大限に活用する方法Node で子プロセスを作成する...

測定画像HTTPリクエスト

一般的なブラウザでテスト ページを開き、Fiddler で http リクエストを表示してください。...

MySQLトリガーの使用と理解

目次1. トリガーとは何ですか? 2. トリガーを作成するトリガーを作成するための構文は次のとおりで...