9. ナビゲーション内のリンクのスタイルを設定

2. マウスに触れたときの背景色を変更する

次に、マウスに触れたときに背景色を変化させるためにスタイルを設定します。

1. 前項と同様に、スタイル作業ウィンドウから［新しいスタイル］をクリックします。
2. ［新しいスタイル］ダイアログの［セレクタ］ボックスには、
   「#navigation a:hover」と入力します。
3. 背景色を変更するので、［背景］カテゴリを開きます。
   background-color値を、ナビゲーションの背景色より濃い色を選択します。
   
4. 文字が読みやすいように文字色の調整も行いましょう。
5. ［スタイルの管理］作業ウィンドウの一覧に「#navigation a:hover」が登録されました。
   
6. 保存してブラウザでプレビューすると、このように、ナビゲーションリンクに触れると背景色が変化するようになりました。
   

   

   

問題は解決しましたか？

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください！

▲このページのトップへ