buttonで個別にhoverの時の色を変える

質問

.redbuttonや.blacbuttonとcssで指定したときに.redbuttonにマウスカーソルが重なると白に、もう一つのblacbuttonにマウスカーソルが重なると赤にのように個別に指定する方法がありましたら教えてください。
よろしくお願いいたします。

回答No.3

ORUKA1951 · ベストアンサー

＞.redbuttonや.blacbuttonとcss(CSS)で指定したときに.
　CSSで、クラスセレクタを指定すると言う事は、単に対象とする要素を指定することで、動作とは関係ないです。
　HTMLやCSSを一度基礎からきちんと、それも正しく学びなおされることを強く薦めます。以下のリンク先だけでも読んで理解しておくこと。
　　(下記にいくつかの用語は説明しておく)
　スタイルシートを用いるという事は
・構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
　をするためです。
　　HTMLには文書構造だけを記述し、CSSはその表現方法--プレゼンテーションを指定する
　★デザインのために.redbuttonや.blacbuttonのようなclass名をつけるのではない!!
　<h1>ここは見出し</h1><p>ここから一つの段落で、<strong>ここは重要</strong></p>
　それだけでは文書構造を示しきれないので
・「id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」
　<div class="nav">ここからナビゲーション</div>、<div class="section">ここは本文</div>

　そのうえで、スタイルシートは、その文書構造に基づいてセレクタで要素を指定してデザインする。
[例]
　本文の段落内の文字は紺色で、重要な語句は赤字で・・
　div.section p{color:navy;}
　div.section p strong{color:red;}

＞.redbuttonにマウスカーソルが重なると白に、もう一つのblacbuttonにマウスカーソルが重なると赤にのように個別に指定する方法がありましたら
　ここまで理解できたら、この質問が成り立たない事が分かると思います。
・クラスセレクタは、個別に指定する一意セレクタ(id)とは違う
・クラスにしろidにしろ他のセレクタにしろ、特定の要素を指定する方法はセレクタで行なう。

★言い換えるとclass名やidに関わらず、セレクタで要素を特定できれば、「マウスカーソルが重なると白に、もう一つのblacbuttonにマウスカーソルが重なると赤に」にとどまらず、スタイルシートで可能な事はなんでもできます。

[用語]
・HTML(Hyper Text Markup Language)は、文書を構成する要素(部品)をタグでマークアップする言語。<p>ここから一つの段落・・・</p>はこのテキストが一つの段落(Paragraph)要素であることを示しています。「ここから一つの段落・・・」はその要素の内容という。

・セレクタ(選択子)は、そのHTML内の特定の要素を指定する方法。div.section p{}とはclass名にsectionをもつdiv要素の子孫(半角スペース)であるp要素と言う意味。
　これはスタイルシートで絶対に必要な知識。しっかり身につけておきましょう。
　5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )
　6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )

p:hover{color:red;}
p+p:hover{color:green;}
p+p:hover+p{background-color:black;color:red;}
段落はカソールが載ると赤文字
二つ目以降の段落は緑色の字
その次の段落は背景黒で文字は白

回答No.4

神崎 渉瑠（@taloo）

>.redbuttonや.blacbuttonとcssで指定したときに
>.redbuttonにマウスカーソルが重なると白に、
>もう一つのblacbuttonにマウスカーソルが重なると赤に
>のように個別に指定する方法がありましたら教えてください。
（改行位置変更）

.redbutton { background-color:red;}
.redbutton:hover { background-color: white; }
.blackbutton { background-color: black; }
.blackbutton:hover { background-color: red; }

ですかね？

文字の色を白・赤に変えたいのか、背景色を白・赤に変えたいのかわかりませんが、とりあえず背景色にしました。

回答No.2

anmochi

言わんとしている事がいまひとつ理解できていないかも知れないが、

.redbutton {
background-color: red;
}
.redbutton:hover {
background-color: white;
}

.blackbutton {
background-color: black;
}
.blackbutton {
background-color: red;
}

とすると、redbuttonというCSSクラスを持つ要素は普段は赤、マウスカーソルが重なると白くなり、blackbuttonというCSSクラスを持つ要素は普段は黒、マウスカーソルが重なると赤くなる。
でも、こういう事じゃないよね？

回答No.1

yambejp

意味がよくつたわってこないのですが

「赤いボタンの上にカーソルがのると白くなる」レベルの話であれば

<style>
.redbutton{background-Color:red;}
.redbutton:hover{background-Color:white;}
.blackbutton{background-Color:black;color:white;}
.blackbutton:hover{background-Color:red;}
</style>
<button class="redbutton">red</button>
<button class="blackbutton">black</button>