- 締切済み
【携帯サイト】画像borderのオンマウス時の色設定
いつもお世話になっておりますm(__)m 携帯サイトを作成しています。 携帯ディスプレイから確認した際、 リンクを張った画像にオンマウスした時のボーダーの色が 青色に統一されてしまうようです。 テキストは色を変えられるのですが、画像の色は指定不可能なの でしょうか？下記がソースです。 <![CDATA[ a:link {color:#fb8686;} a:visited {color:#fb8686;} a:active {color:#fb8686;} a img {border: 2px solid #023916;} a:hover img {border-color:#fb8686;} td {width: 230;} ]]> 当方、Vodafone3G携帯で確認していますが、基本、ドコモでも auでも同じようです。 正しいソースがあれば教えてください。 または、仕様上、ボーダーの色は変えられないのでしょうか？ よろしくお願いいたします。
- tak_goo_00
- お礼率63% (21/33)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
みんなの回答
CSS貼られても肝心のHTMLソースは？ 内部参照で駄目なら外部参照するとかの手法も在りますが、コレはあんまり関係無いと思われるが。
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
:hover疑似クラスはポインティングデバイスのポインタが自分の上 でうろちょろしてる時の挙動なので、マウスのついてない携帯端末 では無意味なのが正しい。 カーソルが合ってるような場合は:focus疑似クラスで指定してみる のが一般的だけど、残念ながらsoftbankは:visitedと:linkしか存在 しないって資料に書いてある。でも実際には:focusで指定した色が 背景色になるって噂だから画像に透明部分があればあるいは…。 ezwebは:focusキッパリ非対応って噂。docomoはできるらしい。
お礼
grumpy_the_dwarfさん、 ご親切にどうもありがとうございます。 ただ、focusは携帯だけではなく、PCの方でも機能しませんでした。。 ソースは以下の通りです。 <![CDATA[ a:link {color:#fb8686;} a:visited {color:#fb8686;} a:active {color:#ffffff;} td {width: 230;} a img { border: 2px solid green } a:focus img { border-color: pink } ]]> （A:focus IMG { border-color: pink }⇒A:focus { border-color: pink }にしても結果は同じでした） 基本的なところで申し訳ございませんが、引き続き お願いできれば幸いです。 あと、focus以外にはやり方ないでしょうか？
お礼
aidesさん、 どうもありがとうございますm(__)m スクリプトを記載します。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN" "i-xhtml_4ja_10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4,キーワード5" /> <meta name="description" content="要約文" /> <title>サイトタイトル</title> <style type="text/css"> <![CDATA[ a:link {color:#fb8686;} a:visited {color:#fb8686;} a:active {color:#ffffff;} td {width: 230;} a img { border: 2px solid green } a:focus img { border-color: pink } ]]> </style> </head> <body style="color:#FFFFFF; background-color:skyblue; padding:2%; " topmargin="0" leftmargin="0"> <div style="text-align:center;"> <img src="images/top_banner.gif" border="0" alt="top_banner" /> </div> <br /> <div style="text-align:center;font-size:small;"> <a href="#"><img src="images/img_01.gif" border="0" alt="img_01" /></a> </div> <div style="text-align:left;font-size:small;"> テキストテキストテキスト<br /> </div> <br /> <div style="text-align:left; background-color:yellowgreen; color:#000000; font-size:small; "> <span style="color:#AB3435"> </span><a href=""><span style="color:#000000;">メニュー01</span></a><br /> <span style="color:#AB3435"> </span><a href=""><span style="color:#000000;">メニュー02</span></a><br /> <span style="color:#AB3435"> </span><a href=""><span style="color:#000000;">メニュー03</span></a><br /> <span style="color:#AB3435"> </span><a href=""><span style="color:#000000;">メニュー04</span></a><br /> <br /> </div> <br /> </body> </html>