- ベストアンサー
buttonで個別にhoverの時の色を変える
神崎 渉瑠（@taloo）の回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
>.redbuttonや.blacbuttonとcssで指定したときに >.redbuttonにマウスカーソルが重なると白に、 >もう一つのblacbuttonにマウスカーソルが重なると赤に >のように個別に指定する方法がありましたら教えてください。 （改行位置変更） .redbutton { background-color:red;} .redbutton:hover { background-color: white; } .blackbutton { background-color: black; } .blackbutton:hover { background-color: red; } ですかね？ 文字の色を白・赤に変えたいのか、背景色を白・赤に変えたいのかわかりませんが、とりあえず背景色にしました。
関連するQ&A
- エクセルでセル色の指定
下のセルに数値が入っているか空白かで分けて上のセルも同じ色に指定するようにしたい。条件付き書式でできますが件数が多いため、まとめて処理したいと思っています。（個別でも構いませんが要は下のセル色を指定すると上のセルも連動して同じ色になるようにしたい。） #1 #2・・・・・・・・#10 赤 白 赤 というデータがあって、下のセルが空白なら赤、数値なら何もしない（白）という風にしたいのです。 関数を考えましたが、わからないのですがマクロにしないとだめでしょうか。どちらの方法でも出来ればいいのです。よろしくご教授下さい。
- ベストアンサー
- オフィス系ソフト
- a:hoverで背景色を指定すると文字が消える！
cssとHTMLを下記のように書きました。 a:hoverで背景色が白から赤へ、文字色が黒から白に変わるようにしたつもりでしたが、 実際にマウスカーソルを乗せると、背景色は赤になりましたが、 なんと文字は消えてしまったのです！！ 文字が見えるようにするには、どうしたら良いか教えて下さいませ。 あと、変な所があればご教示いただけると嬉しいです。 css --------------------------------- .box { display: table; } .box-cell { float: left; display: table-cell; position: relative; color: #000; background-color: #fff; } .box-cell:after { clear: both; } .box-cell a { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .box-cell a:hover { color: #fff; background-color: #ff0000; } --------------------------------- HTML --------------------------------- <div class="box"> <div class="box-cell"> あいうえお<br /> かきくけこ<a href="http://www.yahoo.co.jp/"></a> </div> <div class="box-cell"> あいうえお<br /> かきくけこ<a href="http://www.yahoo.co.jp/"></a> </div> </div> ---------------------------------
- ベストアンサー
- CSS
- cssファイル上で、リンクを飛ばしている文字に、hoverで色指定して
cssファイル上で、リンクを飛ばしている文字に、hoverで色指定して、マウスオーバーすると色が変わるようにしているのですが、1度は解決されたのに、またhoverしなくなりました。マウスをのせても色が変わらないのです！"{"もれなどはありません。。。 少ない情報ですが、考えられる原因を、どなたか教えていただけますか？ しかも、フッター部分のリンクをとばしている文字もhoverさせているのですが、ときどき指定の色ではなく、青になってしまっています。でもいつもじゃないんです。 よろしくお願いします！ありがとうございます！
- 締切済み
- その他（プログラミング・開発）
- CSS、JavaScriptで、「でっかいカーソル」
WEBページにてマウスカーソルを80×80pxくらいの画像にしたいと思っております。 CSSのマウスカーソル変更を調べたところ、cursorで指定できる.curファイルは、なにやらサイズが32x32までの大きさとのこと。 他の方法(JavaScriptなど）で、マウスカーソルを指定の画像に変えることができる方法はありませんでしょうか。 #ジャストアイデアとして、1ドットのcurファイルを作り、そのマウスカーソルにJavascriptで画像をぴったり追従させることも考えていますが（未検証）、よりスマートな方法はないかと思案中です。 よろしくお願いします。
- ベストアンサー
- CSS
- 【DreamWeaverCS5】リンクの色を個別に変えたいのですが・・
【DreamWeaverCS5】リンクの色を個別に変えたいのですが・・・ 現在リンクは黒色で統一したいのでページプロパティで黒色に指定しています。 しかし一部のリンクを水色にしたくて、CSSの文字色を水色に設定してリンクURLも設定しました。 が、やはり黒色になってしまいます。 同じページ内のリンク色を変えるにはどうしたらいいでしょうか・・・。
- ベストアンサー
- ホームページ作成ソフト
- マウスオーバーでテキストの色を変えたい
はじめまして。 よろしくお願いいたします。 一部テキストリンクのマウスオーバー時の色を変えたいんです。 CSSで a:link { color:#0000FF; } a:visited { color:#0000FF; } a:hover { color:#FF0000; } a:active { color:#0000FF; } と設定しています。 そして、一部だけは通常時白にして、マウスオーバー時を赤にしたいと思っています。 一部だけ変える方法が分かりません。 簡単なことかも知れませんがよろしくお願いいたします。
- ベストアンサー
- HTML
- a:hoverの重さ
こんにちは。 マウスを乗せたときに背景色を変えることもできる為、重宝しているＣＳＳのa:hoverなのですが、とても重いのです。 マウスを乗せたときに背景色を変える処理を行っているのですが、マウスを乗せた途端、CPU使用率が９０％を超え、格段にスピードが落ちます。 しかし、文字色を変える処理だとスムーズに動くのです。 さらに背景色を変える処理も、ホームページによってはスムーズに動く。 この違いが全く分かりません。 この現象の原因、出来れば解決策まで教えてください。
- 締切済み
- HTML
- 花水木の色
先日、記念樹として花水木をプレゼントしました。 その時、色を赤と指定したのですが、先日咲いた花を見ると、どう見ても白なんです。 ♯白地に少しだけ赤が混じっている感じです。 もう、花は散ってしまったのですが、これは白の花水木だったのでしょうか？ こういう場合、木を買った店に言っても取り替えてもらえないのでしょうか？ 赤と指定してプレゼントしたのに、すごく悔しいです。
- ベストアンサー
- 園芸・ガーデニング・観葉植物
- CSSでの個別hover設定
<div id="navi"> <ul> <li><a href="#"> HOME</a></li> <li><a href="#"> サービス概要</a></li> <li><a class="hae" href="#"> aaaaa</a></li> <li><a href="#"> 会社概要</a></li> <li><a href="#"> お問い合わせ</a></li> <li><a href="#"><span class="1"> サイトマップ</span></a></li> </ul> </div> #navi ul{ font-size: 12px; list-style: none; margin: 0 0 0 10px; padding: 0 0 0 0; border-top: 1px solid #ccc; } #navi li{ margin: 0; padding: 0; border-bottom: 1px solid #CCC; background: #ffffff url(../img/image133.gif) left center no-repeat; } #navi{ width: 150px; } #navi a{ background: #ffffff url(../img/image131.gif) no-repeat left center; padding: 4px 0 4px 0px; display: block; width: 140px !important; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 150px; /*Window IE5用の値を指定 */ color: #333;text-decoration: none; } #navi a:hover { background: #FFFFFF url(../img/image133.gif) left center no-repeat; padding: 4px 0 4px 0px; display: block; width: 140px !important; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 150px; /*Window IE5用の値を指定 */ color: #333; text-decoration: none; } #navi .hae{ background:none; padding: 4px 0 4px 10px; display: block; width: 140px !important; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 150px; /*Window IE5用の値を指定 */ color: #333;text-decoration: none; } #navi .hae:hover{ background:none; padding: 4px 0 4px 10px; display: block; width: 140px !important; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 150px; /*Window IE5用の値を指定 */ color: #333;text-decoration: none; } 現在、上記の内容で作成しているのですが、サービス概要の下にある aaaaだけを画像表示をOFFにしたいと思ってます。 クラスを設定してカーソルを載せていない時の非表示は出来たのですが ロールオーバー時の画像が表示されてしまいます。 CSSでのクラスhoverの記述が間違っているのでしょうか？ ご教授お願い致します。
- ベストアンサー
- HTML
- マウスカーソルを変更したい。
CSSでマウスカーソルを変更したいと思います。 標準マウスのカーソルを変更するのはできるのですが、 テキストフォーム上、ボタン上、GoogleMapsAPI上での マウスカーソルの変更方法などはありませんか？
- 締切済み
- HTML