• ベストアンサー

オンマウス時の背景色を個別に設定したい

ごめんなさい。 前にも質問して、回答をいただいて、納得して締め切ったはずの質問が、いざコーディングしてみると動きませんでした。反省しています。やはりちゃんと動くのを確認してからでないと駄目ですね。ということでもう一度同じ質問を出します。ご容赦願います マウスを乗せると背景色が変わる仕組みは、たしかa=hoverで可能でしたよね。 そこで問題が発生しました。 私は今サイトを作っていて、左側のメニューバーについてはマウスを乗せると背景色が変わるリンクにしたいんですが、普通の文章中に出てくるリンクについてはそういう仕様から外したいんです。 でもa=hoverを使うと全てのリンクに同じ設定が適合されてしまいますよね？CLASSで個別に設定しようとしても無理でした。どうすればいいですか？ そこでJAVASCRIPTというものを利用して、マウスを乗せるとその文字背景（もしくはボックス内の背景）が 変わる仕組みを実現できるはずなんですが、具体的なソースコードは知りませんかね？できればボックスごとのオンマウス時の背景色を設定できるようにしたいです

  • HTML
  • 回答数4
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • since1983
  • ベストアンサー率39% (33/84)
回答No.1

コレじゃあダメですか？ <HTML> <HEAD> <STYLE type="text/css"> <!-- A:HOVER{ background-color : red; } --> </STYLE> </HEAD> <BODY> <P><A href="http://www.google.co.jp/">背景色の変わるリンク</A></P> <P><A href="http://www.google.co.jp/" style="background-color : #ffffff;">普通のリンク</A></P> </BODY> </HTML>

その他の回答 (3)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.4

やり方については他の方の回答にありますので、うまくいかなかった場合。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ↑HTMLの検証サービス http://www.htmlhelp.com/tools/csscheck/ ↑CSSの検証サービス(英語) 等を使用してうまくいかないページをチェックしてみるといいかもしれません。 またFirefoxの「Javascriptコンソール」ではJavascriptだけではなくCSSのエラーも検出してくれます。 http://www.mozilla-japan.org/products/firefox/ ↑Firefox

kasyle
質問者

お礼

みなさんありがとうございました クラスの宣言の順番が逆だったみたいですね 解決いたしました

回答No.3

<html> <head> <title>aaa</title> <style type="text/css"> <!-- /*menu内のa要素の背景色のみ変更する*/ .menu a{background-color:#******} .menu a:hover{background-color:#------} /*content内のa要素の背景色のみ変更する*/ .content a{background-color:#******} .content a:hover{background-color:#------} /*footer内のa要素の背景色のみ変更する*/ .footer a{background-color:#******} .footer a:hover{background-color:#------} --> </style> </head> <body> <div class="menu"> <a href="***">aaa</a> </div> <div class="content"> <a href="***">aaa</a> </div> <div class="footer"> <a href="***">aaa</a> </div> </body> </html> javascriptで背景色を個別に指定する。 <a href="**.html" OnMouseOver="this.style.backgroundColor='#??????';" OnMouseOut="this.style.backgroundColor='#******';">aaa</a>

参考URL：
http://www.nextindex.net/web/CSS/selector.html
noname#19206
noname#19206
回答No.2

これのような事例でまともに動きませんか？ <html> <head> <title></title> <style type="text/css"> <!-- a:link{color:green;} a:visited{color:darkgreen;} a:hover{color:mediumseagreen;} a:active{color:mediumseagreen;} a.menu1:link{color:blue;} a.menu1:visited{color:darkblue;} a.menu1:hover{color:red;background:yellow;} a.menu1:active{color:red;} a.menu2:link{color:crimson;} a.menu2:visited{color:darkred;} a.menu2:hover{color:deeppink;background:peachpuff;} a.menu2:active{color:deeppink;} //--> </style> </head> <body> <a href="[URL]" class="menu1">パターン１</a> <a href="[URL]" class="menu2">パターン２</a> <a href="[URL]">指定なし</a> </body> </html>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • マウスを乗せると、背景色が変わる仕組みは知ってるんですが・・。

    マウスを乗せると背景色が変わる仕組みは、たしかa=hoverで可能でしたよね。 そこで問題が発生しました。 私は今サイトを作っていて、左側のメニューバーについてはマウスを乗せると背景色が変わるリンクにしたいんですが、普通の文章中に出てくるリンクについてはそういう仕様から外したいんです。 でもa=hoverを使うと全てのリンクに同じ設定が適合されてしまいますよね？CLASSで個別に設定しようとしても無理でした。どうすればいいですか？ そこでJAVASCRIPTというものを利用して、マウスを乗せるとその文字背景（もしくはボックス内の背景）が 変わる仕組みを実現できるはずなんですが、具体的なソースコードは知りませんかね？できればボックスごとのオンマウス時の背景色を設定できるようにしたいです

    • ベストアンサー
    • HTML
  • オンマウスとロールオーバー

    現在サイトを製作中で質問があります。 テーブルのセル内のメニュー1.2.3.4にオンマウスすると そのセル内の背景が変わる、というものを作りたいのですが なかなかうまいこと出来なくて困っています。 スタイルシートで1.2.3.4と設定して いざオンマウスしてみると、1.2.3.4すべての項目が 最後に設定した4の背景に変わってしまいます。 なんとなく、A HOVERは1ページに一つしか設定出来ないのかなと 思いましたが、そうなのでしょうか？ ロールオーバーも試してみたのですが VISTAのせいなのか、ブラウザ上部に 「セキュリティ保護のため、制限されています」の様なメッセージが 出てしまうので、使いたくありません。 HPビルダー12 WIN VISTA HP を使用しています。 よろしくお願いします。

  • a:hover時のみ、divの背景を変えたい

    index.htmlで、ロゴにオンマウスした際に、ページの背景の透明度を変えたいのですが、どう記述していいか分からず困っております。 イメージとして、まずロゴは縦横300pxくらいの大きさで、上下左右センタリングされた位置にあるのですが、ロゴにオンマウスした時に、画面いっぱいの背景が半透明から不透明に変わる…といったものを作りたいです（画像添付しましたが、分かりにくかったら申し訳ないです）。 同じ要領で、ごく簡単に書いたタグがこちら（↓）なのですが、 <html> <head> <style type="text/css"> div{ background-color: #CCCCCC; width: 100px; height: 100px; opacity: 0.5; filter: alpha( opacity=50 );　/* IE */ } a:hover{ opacity: 1; filter: alpha( opacity=100 );　/* IE */ } </style> </head> <body> <div><a>リンク</a></div> </body> </html> div内のa領域にオンマウスした時にだけ、背景の透明度を変えたいのですが、動きません…。しかし、上記の例ですと、たとえ動いてもこれではa要素の背景の透明度しか変わらない気もします。 また、div :hoverは、div領域にオンマウスした時から背景が変わってしまうので、こちらは避けたいです。 今回は子要素から親要素の変更を指定する際の問題だと思ったので、セレクタを組み合わせて色々試したり、検索等もしましたが、どうしても分からないので質問させてください。

    • ベストアンサー
    • CSS
  • オンマウスで特定の画像だけ1ピクセル下げたい

    オンマウス時にボタンを押したような効果を出すためリンク画像を1ピクセル下げたいのですが cssで指定の際 a:hover { position: relative; top: 1pt; } 等としてしまうと、リンクが設定されている文字も画像も全てオンマウス時に動いてしまいます。 自分でもしばらく調べてみたのですが、検索の語がイマイチなのか欲しい情報にヒットしませんでした。 特定のの画像だけ、または文字列だけを動かす指定の書き方がありましたら 教えていただけるとありがたいです。

    • ベストアンサー
    • HTML
  • Dreamweaver上で、背景の領域にリンクを張りつつ、オンマウスで背景色を変更する構造を組む方法。

    現在Dreamweaver CS3を使用してWEBサイトを制作しております。 任意の領域の背景色を設定して、その上にテキストを記入した状態で、その背景領域全域にリンクを張り、 オンマウスした際に背景色を変化させるような構造を作りたいと考えております。 下記の様に、ソースでは希望通りの動作を組むことはできたのですが、その設定を行うページ箇所が膨大なのと、 その作業内容を他者に引き継が無くてはならないため為、可能であればDreamweaver上の機能を使用して簡易に行えたらと思っております。 ソースに関する知識は若干はあるのですが、逆にDreamweaverの使用方法については殆ど理解できていないため、 ご存知の方がいらっしゃいましたらお教えいただけませんでしょうか。 宜しくお願い申し上げます。 【html】 <ul class="test4-1-1"> <li><a href="http://○○○.com/">○○○</a></li> </ul> 【css】 .test4-1-1 { width: 200px; margin: 0; line-height:2; font-size: 14px; } .test4-1-1 li{ list-style: none outside; } .test4-1-1 li a { text-decoration: none; width: 100%; display: block; padding-left: 20px; background: #FCF; } .test4-1-1 li a:link { color: #969; } .test4-1-1 li a:hover { color: #FFF; background: #CCF; } .test4-1-1 li a:visited { color: #C9C; } .test4-1-1 li a:active { color: #F00; }

    • ベストアンサー
    • CSS
  • 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
  • リンクの文字色を別々に指定したい（オンマウスで変わるタグ）

    メモ帳でＨＰをちまちま作ってたのですが、ちょっと困ったことが出てきたので質問させて下さい。 同じページのリンクの文字色を一括で変更するのは… <style type="text/css"> <!-- a:link { color: maroon } a:visited { color: maroon } a:hover { color: white } a:active { color: black } --> a { text-decoration: none; } </style> ですよね。 それと個別に変更するのが… <body link="maroon" vlink="black" hover="white" alink="maroon"> </body> なんですが、個別設定でカーソルをのせた時色が変わるタグがどうしても分かりません。 上の設定を踏まえた上で、オンマウスで色が変わるタグを教えて下さい。よろしくお願いします。

  • リンクにオンマウスで検索ボックス表示

    おわかりになる方に教えていただきたいのですが、 http://lll.s21.xrea.com/m/s/20.html ような簡単なYahooの検索ボックスをHP上に文字だけ、 たとえばYahooとだけ書いておいてオンマウスすると検索ボックスが 現れるというスクリプトまたはCSSでもできれば、教えていただきたいのですが、いろいろと調べてみたのですが、なかなかこれはないようで。。。 できれば、 http://www.lucky-bag.com/appendix/css-popup/popup.html のようなページで現わすことができれば、（オンマウスなのでマウスオーバーしてまた検索ボックスを消したいのですが、） オンマウスの時だけに検索ボックスが現れるとなると、検索文字を打ち込んでさらに検索ボタンを押さないとならないので、その間に マウスオーバーしてしまったら検索することができなくなってしまうので、元のリンクの文字にある程度くっついていて、上記のページのサンプルのようにオンマウスの間にカーソル移動ができるのであれば 問題はないと思うのですが、難しいのです。 オンマウスで検索ボックスを表示して検索できる、というようなことは可能なのでしょうか？ HP内部をすっきりしたいので、たくさんの検索ボックス、GoogleやYahooなど４つも５つもになりますと配置の余裕がなく考えたのもなのですが。。。。 とても困っております、なにとぞよろしくお願いいたします。

  • gooブログのタイトル文字のCSSの設定について

    初めまして。 gooブログアドバンスでカスタムフリーを利用しているのですが、CSSのコーディングについて教えて頂きたい事があります。 "ブログのデザイン" 全体の設定として、リンク文字は白、マウスを乗せた時に文字の色が赤で太さとサイズを若干大きくなるように設定した上で、ブログのタイトル(CSS上では".bTitle")の文字(これもリンク文字です)については、もとの色を赤にして、マウスを乗せた時に、サイズ、太さはそのままで色だけ黒になるようにしたいと思い以下のようにコーディングしました。 A:link { color: #ffffff; } A:hover { color: #ff0000; font-weight: 600; font-size: 120%; } .bTitle { text-decoration: none; font-family: Century Gothic; font-size: 170%; font-weight: 800; color: #ff0000; } .bTitle A:hover{ color: #000000; } このようにしたのですが、ブログのタイトル部にマウスを乗せても黒になりません。.bTitleに A:linkやA:visitedなどもコーディングしてみたのですが、希望通りにはなりませんでした。どのようにコーディングすれば宜しいでしょうか。因みにHTMLの部分のタグは触っておりません。どうかご助力お願い致します。 ※もし必要とされるなら、全体のCSSも記載致します。

  • CSSでテーブルのセルが、a:hover　で背景を変わるようにしましたが、枠がちらついてしまいます。

    テーブルのセルに、リンクのあるテキストをはって、 a:hoverで背景が変わるようにしたのですが、 hoverの状態でセルの外側だけ背景が変わらずに、hover状態でないときの背景がほんの少しちらついてしまいます。 table .a{border: 0px;background-color:red;;padding: 2px;width: 150px;} table .a a:hover{border:0px;padding: 2px;width: 150px;background-color:orange;} のようにすると、 hover状態で、セルの枠が、ほんの少しredのままになってしまいます。 http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ の 3.BOX　の例のように、hover状態できれいに背景の色が変わるようにしたいんですが、どう直せばいいでしょうか。よろしくおねがいいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する