jQueryでダミーフォーカスの実装 (でぃべろっぱーず・さいど)

昨日公開した「Amazon ベストセラー ビューア」では、左側の商品のサムネイルで、オレンジ色のカーソルを実装しています。キーボードの、hで左に移動、lで右に移動、jで下に移動、kで上に移動します。 今回は、こうしたダミーフォーカスの実装方法を解説します。 とっても、やり方は簡単で、フォーカスを表現するスタイルシートのクラスを定義して、そのクラスを付け外しするだけです。 「Amazon ベストセラー ビューア」では、フォーカスを定義するスタイルシートのクラスとして、以下のようなクラスを定義しています。 #feed img{ padding:3px; } #feed img.selected { background-color:#FF8C00; } id="feed"のエレメント（サイトではdiv）の下にあるimgは、すべてpadding:3pxとし、selectedというクラスが指定され

[monjudoh]

hljkでフォーカスのように見えるものを動かすUIの実装