ランク付け(CSS利用) - FAX

ランク付け(CSS利用) 技術 Creating a Star Rater using CSS > Blog > Komodo Media よしみかんさんに、コメント欄にてCSSのみで格付けを実現するリンクを教えて頂いた。 正直に言うと以前に見掛けたことがあったのだが、「CSSだらけで大変なくせに、IEではチカチカしていやぁね」と思い読み飛ばしていた。 しかし改めて見直してみて、詳細に調べると楽しかった。ありがとーございました。 リンク先は複雑でわかりづらく感じた。 まず星が縦に2つ並んだ画像と、5つのAタグを用意する。 そして各々のAタグのhoverイベントで、z-indexと、画像の表示範囲と、幅の3つを変更し、星の表示を行なっている。 細かなテクニックから学ぶ点は多い。 position:relative の要素の中で、position:absolute を使い、範囲内での絶対位置を

[retlet]

"position:relative の要素の中で、position:absolute を使い、範囲内での絶対位置を指定できる" あー、確かに。

[wacky]

マウスオーバーで格付けを行う仕組みをCSSのみで実現。hoverでz-indexと画像の表示範囲と幅を変更。なるほど。