- 締切済み
chromeでの擬似クラス:focus について
現在ホームページを作成中です。 cssで擬似クラス「:focus」を使った時の挙動について困っているので質問させて頂きます。 CSSを使って、サイト内でとあるサムネイルをクリックした時に、そのサムネイルの横に大きく画像を表示させようと思っています。 http://c-brains.jp/blog/wsg/08/06/27-210059.php こちらのサイトを参考にして作ったところ、FirefoxやIEでは期待したとおりに動いてくれたのですが、chromeでは残念ながら反応がありませんでした。 そこで何が原因かを調べるために、簡単なところから解決していこうと思い htmlに <a href="#">あいうえお</a> と記載し、cssに a:link { color:black; } a:focus { color:white; background:blue; } と、記載してみた処、リンクをクリックすればFirefoxやIEでは期待したとおりに文字色や背景色が変わりますが、chromeでは反応がありませんでした。 chrome自体が「:focus」に対応してないのかと思い、色んなサイトで調べてみましたが、数年前の記事では対応しているように見えました。(最近の記事は見つかりませんでした) そこで質問です。もしかして、バージョンが上がって、chromeでは「:focus」に対応しなくなったのでしょうか。
- みんなの回答 (4)
- 専門家の回答
みんなの回答
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2281)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2281)
関連するQ&A
- Chrome はそんなに速さはないし、実際は遅い!?
Chrome はそんなに速さはないし、実際は遅い!? Chromeはそんなに速さはないし、実際は遅い!? firefoxと比べるとページ表示がおそっ!エクステも使えそうな感じだし、すっきりとしたデザインもOK。で速いならchromeに移行しようとしたけど肝心の速さが期待以下でがっかりだ。 エクステ取っ払ってもアドオンてんこ盛りに劣るのかよw 速さ的にはIE8といい勝負かも。firefoxがシャキーン!って感じで表示するのにChromeはシャ・・キーン!っていう具合です。 世間では最近評判いいような記事も見るけど信じられん。(起動だけは速いけど) 頑張ってエクステも集めたのに・・・・せめてfirefox程度まで速くする方法などはないものでしょうか
- ベストアンサー
- ブラウザ
- [CSS] focusについて
入力フォームを作っています。 CSSを使って入力フォームにフォーカスがある場合の表示方法を変えたいのです。 input:focus { background-color: #000000; } 上記の方法で可能なはずですが全く変化ありません。 ブラウザはIE6です。
- ベストアンサー
- HTML
- 擬似クラスの子要素を指定するセレクタ
リンク色を変えるセレクタについて質問です。 以下のHTMLがある場合に、abcの文字色を変えるCSSセレクタを a:link { color:blue } ←これ以外で教えて下さい。 <div id="id"> <a href="#"><span>abc</span></a> </div> 以下のCSSでは色が変わりませんでした。 #id a:link { color:pink } #id a:link span { color:pink } #id a:link * { color:pink } (HTML構造は都度変わるため隣接セレクタではなく汎用性のある下位セレクタで指定したいです。)
- ベストアンサー
- CSS
- 擬似クラスがupできない
こんばんは。どうしても擬似クラスがupできません。 =01.css= <style type="text/css"> a:hover{ font-weight:bold; text-decoration:none; color:red; } </style> =index.html= <html> <head> <title>○▲□×</title> <link rel="stylesheet" href="01.css" type="text/css"> </head> どうして擬似クラスがupできないのですか? どこか打ち間違いでしょうか? hoverだけ使いたいので、それ以外は打つ必要ないと 思いますし、今後、他のスタイルも加えて行きたくも 思ってます。 どうぞよろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- Google chrome でYAHOOのトップページ表示がおかしい
ブラウザ Google chromeを使用していますが先ほどからYAHOOのトップページ(通常版)のみCSSがリンクしていないような表示になっています。 IE8やFirefoxでは問題なさそうです。 Google chromeキャッシュ等はクリアーしましたが、症状変わりません。 どなたか、原因のわかる方はいらっしゃいますでしょうか?
- 締切済み
- ネットトラブル
- Chrome ブラウザの配色
googleブラウザChromeを使っている方で配色の変更方法がわかるかたいらっしゃいませんか? FirefoxやIEなどでは、そのサイトの色を無視して配色をすることができます。(例えば目に優しいようにどんなサイトでも黒地に白文字でリンクは水色など) Chromeではそのようなことはできませんでしょうか? アドオンなどで実現できるのであればそれでも良いのですが・・・ 宜しくお願いします。
- 締切済み
- Windows系OS
- 送ったURLをChromeで開かせたい
人にhttps://で始まる、とあるURLをメールで送ります。 そのメールを見る相手側のパソコンにはIEもFirefoxもChromeも導入されている前提で、かつそのパソコンのデフォルトのブラウザは上記3種類のどれかに決まってはいません。(ばらばらです) そんな場合でも、送ったURL Linkをクリックすると、そのLinkに限っては必ずChromeで開くようにする方法(メールへのLinkの貼り付け方)はあるのでしょうか。 確か、Chrome :// とかをつけてhttps:// を送っているようなメールを見たような記憶があるのですが、勘違いでしょうか。
- 締切済み
- ブラウザ
- Chromeで表示するとズレてしまう
作成したホームページをIEで表示すると全く問題ないのですが、Google Chromeでチェックするとぐちゃぐちゃで全くでたらめに表示されてしまいます。どうすればきちんと表示することができるのでしょうか?これがCSS ハックというものなのでしょうか?だとすれば、CSSの中にChrome対応の一文を挿入すれば回避できるのでしょうか?どなた様かご教授願えませんでしょうか。どうぞ宜しくお願い致します!!
- ベストアンサー
- ネットトラブル
- クラス属性?
CSSの外部呼出しで、 A:link { color: #0033cc; } A:visited { color: #0033cc; } A:active { color : red; } 上記をdivでまとめたいのですが、記述の仕方がわかりません。 そしてもう1パターン A:link { color: #FFFFFF; } A:visited { color: #FFFFFF; } A:active { color : red; } というものもdivでまとめて、外部呼出しのCSSファイルに記述したいのですが、可能でしょうか?
- ベストアンサー
- その他(プログラミング・開発)
- style属性を使って擬似クラスを表現することは可能ですか?
CSSの読み込み方には3通りあります。 1)<head>~</head>内にstyle要素をマークアップする。 2)外部CSSファイルをHTMLに読み込ませる。 3)任意のタグにstyle属性を指定する。 そこで質問なのですが、3)のstyle属性で擬似クラスを指定する事は可能でしょうか? 1)と2)の方法であれば、 div a:link { color : #fff ; background : blue ;} div a:visited { color : #fff ; background : purple ;} div a:hover { color : #fff ; background : aqua ;} div a:active { color : #fff ; background : purple ;} のように指定すればよいだけですが、 3)の方法、つまりstyle属性を用いて擬似クラスの指定の仕方が分かりません。 宜しくお願いします。
- ベストアンサー
- CSS
お礼
お返事ありがとうございます。 focusは本来タブキーとかで対象に取った時の挙動なのですね。 参考にしたサイトだとクリックで対象に取った時に表示するような説明でしたので、勘違いしてしまいました。 今後気をつけていきます。