a:hover img.●●について

前へ 次へ
このQ&Aのポイント
  • お問い合わせフォームの送信ボタンを画像にして、ロールオーバーイメージ風に画像ボタンにカーソルを合わせると光るようにしたいのですが、うまくいきません。
  • ご教示いただけたら、助かります。
  • CSSとHTMLタグが提供されています。
回答を見る
  • ベストアンサー

a:hover img.●●について

お問い合わせフォームの送信ボタンを画像にして、 ロールオーバーイメージ風に画像ボタンにカーソルを 合わせると光るようにしたいのですが、うまくいきません。 ご教示いただけたら、助かります。 【以下cssタグ】 a:hover img.over { opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; } 【以下htmlタグ】 <div class="over"> <p><input type="image" src="http://●●/images/button.gif" alt="送信する" width="177" height="42"></p></div>

noname#248615
noname#248615
  • CSS
  • 回答数3
  • ありがとう数4

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

  • ベストアンサー
回答No.2

このHTMLタグだとCSSは .over p input:hover{ opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; } なのでは

noname#248615
質問者

お礼

ご回答ありがとうございました。 全くご指摘の通りでした。 ご協力感謝します！

その他の回答 (2)

回答No.3

htmlタグにaタグがないのに、cssはaタグに対してhoverを記述していますね、 inputに対してcssを記述しないとダメなのではないでしょうか’。 【html】 <form id="over"> <input type="image" src="http://●●/images/button.gif" alt="送信する" width="177" height="42"> </form> 【css】 form#over input:hover { opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; }

noname#248615
質問者

お礼

早いご回答ありがとうございました。 たいへん参考になりました。 ご協力感謝します！

  • sanzero
  • ベストアンサー率56% (58/102)
回答No.1

cssにあわせるならこんな感じにマークアップしなくてはいけません。 <a href="#"><lmg class="over" src="hogehoge.png"></a>

noname#248615
質問者

お礼

早いご回答ありがとうございました。 たいへん参考になりました。 ご協力感謝します！

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

関連するQ&A

  • 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
  • a:hoverの下線指定が反映されない

    htmファイルのheadタグ内に以下のようなCSSの記述をしていますが、なぜかa:hoverのunderlineの部分だけが反映されません。 <style type="text/css"> <!-- img { vertical-align: bottom; } img { border-style:none; } a:hover img{ opacity:0.6; filter:alpha(opacity=60); -ms-filter: “alpha( opacity=80 )”; } a{ text-decoration:none;} a:hover { text-decoration:underline;} --> 当方初心者でして詳しい方にご教授いただきたいです。 宜しくお願いいたします。

  • CSSのfilterでテキストまで透明化される

    CSSのfilterプロパティで背景色だけでなくテキストまで透明化されてしまいます。 以下のように親divの中に子divを造り、その子divにテキストを入力し、 親divに設定した背景画像が子divに透き通って見えるように 子divにfilterプロパティを設定しました。 子divの背景色（白）が透明化され親divの背景画像が見えるようになったのはいいのですが、 背景色（白）だけでなくテキスト文字まで透明化されてしまいます。 テキスト文字だけ透明化されないように設定したいです。 ブラウザチェック：windows IE 8　です。 ******************************************************* 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30);　←背景色（白）が透明ぽくなるように設定 } ******************************************************* テキスト文字まで透明化されるので、さらにそのテキストをpタグで囲ってみましたが、 それでもテキストが透明化されている（親divのfilterがpタグまで継承されているから？）ので pタグにfilterプロパティで不透明を１００に戻すような設定をしてみましたが適用されません。 *************************　【変更後】　*********************** 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30);　←背景色（白）が透明ぽくなるように設定 } p { filter:alpha(opacity=100); ←テキスト文字まで透明化されるのでpタグで囲って不透明１００に設定 } ******************************************************* ご指導のほどよろしくお願いします。

    • ベストアンサー
    • CSS
  • オンマウスでパーセントを変更

    filter:Alpha(opacity=40); としてあるものをマウスオーバーで「80」とかにしたいのですが、どのようにやったらいいのかわかりません。 function imagePar(imageName,Percent){ document.images[imageName].style.filter:Alpha(opacity=Percent); } とかやってみたんですがダメでした（＞＜） お分かりの方、教えてください！！

  • 透過背景を解除するにはどうすればいいのでしょうか？

    透過背景を解除するにはどうすればいいのでしょうか？ filterとopacityを使って背景色を透過したdivがあります このdivの一部で透過を解除したいのですがどうすればいいのでしょうか？ コードは以下のようなイメージです ---------- ■ HTML <div class="sample1"> ・・・←ここは透過 <div class="sample2"> ・・・←ここは透過にしたくない </div> ・・・ </div> ■ CSS .sample1 { ・・・ opacity: 0.6; ←火狐他用 filter: progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=60); ←IE用 } .sample2 { ここに記述する内容が知りたい } ---------- やってみてダメだった方法 ・opacity: 1 ・filter: progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=100); ・filter: progid:DXImageTransform.Microsoft.Alpha(Enabled=0,Style=0,Opacity=60); ・sample2に新しい背景色を指定する ・sample2に新しい背景画像を指定する ご存知の方いましたら、よろしくお願いします！

    • ベストアンサー
    • HTML
  • このCSSの番号部分、解説して下さい！

    a:hover img{ opacity:0.5;--------------(1) -moz-opacity:0.5; --------------(2) filter:alpha(opacity = 50);}--------(3) opacityは透明度らしいですが、どうして(1)～(3)の三つも書く必要があるのでしょうか？ 検索しても解りませんでした・・ 宜しくお願いします。

  • styleタグとbodyタグの関係について分かりません・・・

    スタイルシートの中にbodyを入れた場合、</html>の前に</body>は必要でしょうか？それとも不要でしょうか？ 下記のタグはマウスオーバーで画像の濃さを変えるようにしたかったため、サイトより転用しました。 スタイルの中にbodyタグを入れる意味はどういった利便性がありますか？ <style type="text/css"> <!-- body { margin-left: 2em; margin-right: 2em; style: overflow-x:hidden; color: black; background: #FFFFFF; } a:link { color: blue; } a:visited { color: purple; } h1 { font: bold 1.5em Verdana; } a img { filter: Alpha(Opacity=100); -moz-opacity: 1.5; border-style: none; } a:hover img { filter: Alpha(Opacity=50); -moz-opacity: 0.5; } --> </style> ご存知の方教えてください！

    • ベストアンサー
    • HTML
  • ホームページのhover部分の印刷について

    ホームページの画像の部分をhoverを使って、画像切り替えしているところがあります。 当然、その部分は印刷されないのですが、hoverなしの画像の状態で印刷したいと思っ ております。 このような場合、どのような処理にすれば、screen上ではhoverがきき、印刷もされるよ うに出来るのでしょうか。 以下は現在のソースです 【HTML】 <div class="header"> <a href="./" id="hogehoge">Top</a> </div> 【CSS】 a#hogehoge { display: block; width: 900px; height: 210px; text-indent: -1000px; background-image: url("../images/main/img_header.jpg"); } a#hogehoge:hover { background-position: bottom left; }

    • ベストアンサー
    • HTML
  • tableを半透明にする件

    tableを個別に透明にする設定などはわかったのですがテーブルの中身 の文字や画像まで透明になるのを防ぐ方法はないでしょうか？ 返信お待ちしています。 <STYLE TYPE="text/css"> <!-- TABLE{filter:Alpha(opacity=50);} --> 個別に下記タグで透明度を設定しています。 </STYLE> style="filter:Alpha(opacity=50);"

  • マウスオーバー時に、半透明のフィルターをかけたい

    タイトルにフィルターという言葉を使っていますが、 filterを使う技ではないかもしれません。 背景に画像を設定しており、テキストにはfilter:dropshadowで 影を付けています。 また、<A HREF="">…</A>のリンクも付いています。 この状態で、テキストにマウスを乗せた時、 半透明のフィルムをかけたような感じにしたいのです。 onmouseover="this.style.backgroundColor='色'; 　　this.style.filter='alpha(style=0,opacity=30)'; とやってみたのですが、背景色が半透明にならならず、 文字に付けた影も消えてしまいます。 また、CSSでもやってみたのですが A:hover { background-color : 色 ; filter : alpha(opacity=30); -moz-opacity : 0.30 ; opacity : 0.30 ;} やはり、半透明にはなってくれませんでした。 透明度はまったく無い、元の色のままです。 偶然にも半透明の背景になった時はあったのですが （タグは忘れました） 文字まで半透明になってしまいました。 しばらく色々試していたのですが、もし半透明になったとしても 変えたいのは背景色ではないという事に気づき、 また最初から考え直しでかなり参っています。 （自分が悪いんですが・・・） ●半透明の色フィルムを重ねたような感じにしたいです。 　当然、文字も文字の影も背景も、透けて見える状態。 ●文字の長さはそれぞれ異なります。 ●あくまでもマウスオーバー時にそのようになり、 　乗せる前、離した後は元通り、何も無い状態にしたいです。 CSSを使うのかJAVAを使わないとダメなのかもよく分からず、 説明も上手くできなくて申し訳ありません。 どうぞ宜しくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する