- ベストアンサー
画像の切り替え方法とクリック時の画像表示について
- 画像の切り替え方法とクリック時の画像表示について詳しく教えてください。
- Webサイトで画像の切り替えを行う方法と、クリック時の画像表示について知りたいです。
- 画像の切り替えやクリック時の画像表示に関する詳しい情報を教えてください。
- yorosiku_orz
- お礼率45% (19/42)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>a:active ではできなかったのですが・・・ >「 ： 」この部分を「 ． 」これに変更したら何故かできました。 >なぜなんでしょうか？ 質問者さんが作ったHTMLソースがないので確かなことはわかりませんが、 ブラウザによって、正常に反映されないようですね。 提示したときは、IEだけで確認しましたが、FireFoxで試したところ 正常に反映されませんでした。 追加したCSS部分を以下のように変更することで IE,FireFoxで反映されました。 /* global navi click ----------------------*/ #navi1 a:focus,#navi1 a:active { width:100px; background-position:0 -30px;} #navi2 a:focus,#navi2 a:active { width:100px; background-position:-100px -30px;} #navi3 a:focus,#navi3 a:active { width:100px; background-position:-200px -30px;} #navi4 a:focus,#navi4 a:active { width:100px; background-position:-300px -30px;} a:activeとa:focusを指定しています。 ただし、Googleクロームと、Safariでは反映されませんでした。
その他の回答 (1)
- mikemike7
- ベストアンサー率87% (97/111)
CSSの最下部に以下を記載します。 /* global navi click ----------------------*/ #navi1 a:active { width:100px; background-position:0 -30px;} #navi2 a:active { width:100px; background-position:-100px -30px;} #navi3 a:active { width:100px; background-position:-200px -30px;} #navi4 a:active { width:100px; background-position:-300px -30px;} CSSの指定はa:hoverの内容と同一ですが、 a:activeとして、クリックした際の挙動を指定しています。 デフォルトではa:activeの記載がなかったので、 追加することでやりたいことは実現できると思います。 a → リンク全体 a:link → 未読リンクの状態 a:visited → 既読リンクの状態 a:hover → リンクにマウスが乗った状態 a:active → リンクをクリックした状態
お礼
早々のご回答有難うございます。 a:active ではできなかったのですが・・・ 「 ： 」この部分を「 ． 」これに変更したら何故かできました。 なぜなんでしょうか？
お礼
なるほど。 ブラウザによって反映が違うのですね。 ちなみに、私の使用ブラウザはIE8です。 度々有難う御座いました。