- ベストアンサー
マウスのロールオーバーについて
- CSSを使用して、メニューバーにマウスが乗った時に色を変える方法を教えてください。
- マウスのロールオーバー時の色変更方法を知りたいです。
- マウスを乗せた時にメニューバーの色を変えるにはどのCSSタグを使えばいいのでしょうか。
- CSS
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
あ、失礼。。 text-decoration: none; ではなく、 元々デフォルトのunderlineなので、 アンスコは変化なしが、正しいですね。 コメントミス。
その他の回答 (2)
- AsarKingChang
- ベストアンサー率46% (3467/7474)
>スマホのハンバーガーメニューになる前のPC表示の時のメニューバーにマウスを乗せた時に色が変わる(通常時は青でマウスを乗せたら赤)ようなhoverタグを入れても色を変えることはできないということですか？ コードが間違っていないなら、正しく色は変わりますよ。 >こちらの知識不足なのですが、まずHTMLにメニューバーのタグを書いて、CSSには PC表示の時はこうになるようにして、そしてスマホ表示の時はハンバーガーメニューになるようにまたタグを書く作業の仕方でというのは間違いですか？ どちらでもいいです。基本はCSSで整形して、それでもダメな時は、 SP用とPC用の別のHTMLを書いて、 display:none;切り替えするのは、間違いではないですよ。 なお、今回書かれているCSSを 実際に動作する事をこちらで確認済みです。 マウスホバー時、アンダーラインなしカラー＃999グレイ が正しく適応されてることは、確認済みです。 本物のSPの場合は、マウスカーソルがないので、 メディアクエリ内で書いても意味がないので、 表のグローバル空間で問題ないと思います。 （メディアクエリがSP用と仮定しての場合）
補足
お返事ありがとうございます。 アドバイスを参考にして、 <style> <!--- a { background-color:#000000; color:#ffffff; { //--> </style> <style> <！--- a:hover { background-color:#ffffff; color:#000000; } //--> </style> を、<head>< /head>の中に入れてみたのですが、PC表示時のメニューバーにマウスを置いても色がかわりませんでした。 すみません訂正があります。 PC表示時にマウスがメニューバーに乗った時、背景は白で文字は黒にしたいんです。 私の中でスマホ表示にした時のハンバーガーメニューは思う通りにできています。 自分でもいろいろ検索して思ったのですが、ヘッダー下にメニューバー(長方形の背景は黒で各メニューは白文字で書いてある。)を作成して表示してる方は割といるのに、スマホ表示にした時にその長方形のメニューバーを、ハンバーガーメニューになるようにしている方は何故かいないんですよね。 その代わりPC表示時にヘッダーの左にLOGOと書いてそのまま右側にaboutや会社概要とかを文字だけで表現し、そしていざスマホ表示にした時に、それがハンバーガーメニューになるようにしてある方が多いのは、どうしてでしょうか？ 画像を添付できればよいのですが、、、。
- AsarKingChang
- ベストアンサー率46% (3467/7474)
どこでもいいです。 と書くと、え？じゃ～ @media only screen and (max-width: 768px) { は？っていうかもですが。 そもそもこれ、SP用でしょ？ SPにマウスはありませんから。 結果どこでもいいのです。
補足
スマホのハンバーガーメニューになる前のPC表示の時のメニューバーにマウスを乗せた時に色が変わる(通常時は青でマウスを乗せたら赤)ようなhoverタグを入れても色を変えることはできないということですか？ こちらの知識不足なのですが、まずHTMLにメニューバーのタグを書いて、CSSには PC表示の時はこうになるようにして、そしてスマホ表示の時はハンバーガーメニューになるようにまたタグを書く作業の仕方でというのは間違いですか？
お礼
今回は長い期間お付き合いいただきとても感謝しております。 わからなかったことなどすごく勉強になりました。 ありがとうございました。