日本語
フォーラム
Home / 使い方全般 / hover､ブラウザーによって反映したり､しなかったり
(@wp_manabu)
7年、 6ヶ月前
hover（疑似クラス）をつかって､マウスをのせたとき､画像の色が変わるように指定しました｡
で､Macにて確認してみますと､Chromeではうまく反映するのですが､FirefoxやSafariでは､まったく反映しません｡ またiPhone上のChromeでも､無反応です｡
これは､Wordpress固有のものなのか､はたまたCSSに原因があるのか､ブラウザー側の問題なのか､見当さえ､つきません｡
どうぞ､ご教示くださいませ｡
そのウェッブサイトは､こちらです｡ご参照ください｡
(@du-bist-der-lenz)
擬似クラスはOS、ブラウザ、そのバージョンで違いがあります。 ブラウザ別の対応状況は、公開されている情報があります。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors
(@munyagu)
こんにちは
WordPress自体のせいでhover疑似クラスが動かない、ということはありません。 テーマの何かのCSSでhover疑似クラスがうまく動かないことはありえますが、それはWordPressでなくても他のCSSと競合してうまく反映されないことはありうることです。
また、hover疑似クラスは主要モダンブラウザ全てで実装済みなので、ブラウザが異なるせいでhoverがうまくいかない、ということもないと思います。 https://developer.mozilla.org/ja/docs/Web/CSS/:hover#Browser_compatibility
ただ、hover疑似クラスだけの問題だけではなく、他のHTMLエレメントやCSSの影響でブラウザ間の動作で差異が出る可能性はありますが、これもWordPressが原因ではありません。
とりあえず、うまくいかないブラウザのキャッシュを削除するか、ブラウザのデベロッパーツールでのデバッグをされてはどうでしょうか。
スマートフォンでのhover疑似クラスはあまり意味がないように思いますが、動作もあまり良くないようです。 http://sensebahn.com/develop/524/
Du bist der Lenz さま
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors をチェックしてみました｡ごめんなさい､こちらの力量不足ゆえ､理解できませんでした｡
munyaguさま
https://developer.mozilla.org/ja/docs/Web/CSS/:hover#Browser_compatibility をチェックしてみました｡
hoverは､link等で上書きされてしまうので､属性を書く順番に留意する必要があるということですね｡そのさいのlinkのニュアンスがイマイチつかめないのですが､とりあえず､hrefをhoverの前に書きなおしてみました｡がしかし､やはり､うまくいきませんでした｡当てずっぽうですから｡神だよりですもんねぇ｡
キャッシュは削除しています｡
WordPressに原因がなさそうなことは承知しました｡ほかのCSS等､さまざまな要素がからみあっていると｡
ならば､http://sensebahn.com/develop/524/ のように､iPhone対応をふくめて､JavaScriptをつかう手がありそうです｡こちらは､これからの宿題です｡
