- ベストアンサー
CSSでオンマウス時のborder-colorを修正する方法
- スタイルシートで立体的に見せるボタンを作成し、オンマウスにしたときのborder-colorが変わらない問題について解決方法を教えてください。
- CSSの記述において、オンマウス時のborder-colorを修正する方法について詳しく説明します。
- HTMLの記述と一緒に、border-colorが変わらない問題への解決策を提案します。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
#3 です。 > ちなみにdisplayのinline;とは何ですか？ 端的に言ってしまうと、 display: block; ==> 段落 display: inline; ==> 段落を形成する要素 かな。（上手く表現できない） 【例文】 1). <p>語句の組み合わせ</p> <p>語句の組み合わせ</p> 2). <p><em>語句の組み合わせ</em> <em>語句の組み合わせ</em></p> 上記の例文をブラウザで表示すると、 (1)は、 語句の組み合わせ 語句の組み合わせ (2)は、 語句の組み合わせ 語句の組み合わせ のように表示され、改行の違いがありますよね。 これは、<P> が“block”要素に用いるダグ、<EM> が“inline”要素に用い るダグと最初から決まっているからです。 p { display: inline } とすれば、<P> 要素は段落を形成する一要素になり、 em { display: block } とすれば、<EM> 要素は、それ自体が段落となります。 これで分かりますかね！？ 因みに、li { float: left } と指定しているのを見て、<LI>要素を改行なし で横に並べたいんだと解釈して、先の投稿となりました。 “float”と“display”指定の違いは、前後の要素に及ぼす影響などを、い ろいろ実験してください。
その他の回答 (4)
- Bo_Bo
- ベストアンサー率65% (97/149)
#3 です。 #4 の投稿を読み直して、少し補足します。 <html><head><title>TEST</title> <style type="text/css"><!-- p { display: inline } em { display: block } --></style> </head><body> <p><em>語句の組み合わせ</em> <em>語句の組み合わせ</em></p> </body></html> 上記の状態では、“block”要素となる <EM> 部分が、“inline”要素の <P> に内包されています。 これは、明らかにおかしい状態だと思います。（自分で書いておいて・・・） 財布の中にお札を入れることは出来るけど、 お札の中に財布を入れることは出来ない。 状態と言うのでしょうか。 ブラウザは何の問題もないように描画しているようですが、文法的には間違 っていることを認識しておいてください。
- Bo_Bo
- ベストアンサー率65% (97/149)
オリジナルにある“border”指定は、１つは <LI> に、もう１つは <A> 要素 を対象にしていますよね。このCSS定義で“a:hover”による書式変更は、 <LI> の書式には及ばないことに注意してください。 で、ちょっとCSSの内容を編集しました。望む結果になるかな！？ <html><head><title>TEST</title> <style type="text/css"> <!-- .menu05 ul { list-style-type: none; margin: 1em 0; } .menu05 li { display: inline; margin: 0; padding: 0 4px; } .menu05 a { padding: 2px 8px; border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #666; border-bottom: 2px solid #666; color: #00c; background: #ccc; text-decoration: none; } .menu05 a:hover { border-top: 2px solid #666; border-left: 2px solid #666; border-right: 2px solid #fff; border-bottom: 2px solid #fff; color: #f00; background: #aaa; } --> </style> </head><body> <div class="menu05"> <ul> <li><a href="#">ご案内</a> <li><a href="#">プラン</a> <li><a href="#">プレゼント</a> </ul> </div> </body></html>
- k_jill
- ベストアンサー率34% (36/105)
#1さんのお答えで解決かもしれませんがちょっとだけ蛇足を。気になったので…。 スタイルの指定が .menu05 a:hover { border-top: solid 2px #c0c0c0; border-right: solid 2px #c6c6c6; border-bottom: solid 2px #c6c6c6; border-left: solid 2px #c0c0c0; color:#ff0000; display: block; } となっていますが、線種と太さと色はそれぞれ別に指定しなくて良いのでしょうか。例えば、 .menu05 a:hover { border-style: solid; border-width:2px; border-top-color: #c0c0c0; border-right-color: #c6c6c6; border-bottom-color: #000000; border-left-color: #c0c0c0; border-color:#ff0000; display: block; } こんな感じ…？。 ひょっとしてまとめ指定が出来るんでしたら余計な口出しですが。済みません不勉強なもので…。気になっただけなのでスルーされても構いません。 失礼しました。
補足
回答ありがとうございます。 線種と太さは初めはまとめて指定していたのずが、反映されないので、 一辺ずつ指定しないと反映しないのかなぁ～と書き換えましたが、やっぱり反映されなかったです。
- taka451213
- ベストアンサー率47% (436/922)
こんにちは。 .menu05 a:hover { にある color:#ff0000; → border-color:#ff0000; です・・・。 (^^ゞ
補足
回答ありがとうございます。 color:#ff0000; は文字色です。 border-colorを変えたいのですが…。
お礼
回答ありがとうございます。 先にaで定義しないとダメなんですね～。なるほどぉぉぉぉ！ ありがとうございました！ ちなみにdisplayのinline;とは何ですか？ CSSはおもしろいけど、なかなかむずかしいです。