【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
レスポンシブサイトでクリッカブルマップを使う時に超便利な「jQuery RWD Image Maps」
業務メモ。 最近はかなり減りましたが、Webサイト作成時たまに使用せざるを得ないあいつ。そう、クリッカブルマップ。 画像の好きな場所にリンクを仕込めるのは便利ですが、レスポンシブの案件ですとリンクエリアが指定した座標からずれてしまうため困っちゃう。 jQuery RWD Image Mapsはそんな悩みを一発で解決してくれる便利なjQueryプラグインです。 使い方 使い方は非常に簡単。まずはstowball/jQuery-rwdImageMapsからjsファイルをDL。適宜アップロードします。 HTML [html] <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.rwdImageMaps.js"></script>
[JS]画像を用意しなくていいから簡単！クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map
デモページ 2 Japan Mapの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="jquery.japan-map.min.js"></script> </head> Step 2: HTML 日本地図を配置するdivをセットします。 <body> ... <div id="map-container"></div> ... </body> Step 3: JavaScript jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。 <script> $(function(){ $("#map-container").japanMap({ on
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin
