1

私は星評価タイプのシステムを作ろうとしていて、その分だけcss部分に取り組んでいます。次のような背景画像を介してcssの背景画像を使用して、星がライトアップされたものに置き換えられるようにしました。

.hover-stars:hover{
    background-image: url(http://www.softwares.com/img/icons/favorites.png);
    background-repeat: no-repeat;       
}

私が試して知りたいのは、ホバー後の影響を実装することです。そのため、ユーザーがホバーすると画像はそこにとどまります。可能であれば、ユーザーがもう一度ホバーする必要がある場合は元に戻します。星がユーザーのマウスの軌跡をたどっているように錯覚させます。

私はこれを試しましたが、うまくいきません。

.hover-stars:hover:after{
    background-image: url(http://www.softwares.com/img/icons/favorites.png);
    background-repeat: no-repeat;
}
4

1 に答える 1

1

:afterセレクターは、要素の後にコンテンツを挿入します。したがって、それは正しい使用方法ではありません。あなたが探していることが CSS でできるとは思えません。hoverで要素にクラスを追加または削除することにより、jQuery を調べてトリックを行うことができます。例えば...

$(".hover-stars").hover(
function () { $(this).addClass(".hover-star-after")
});​

そして、追加したい追加の CSS クラスを追加します...

.hover-stars-after {
background-image: url('http://www.softwares.com/img/icons/favorites.png');
background-repeat: no-repeat;
}
于 2012-12-19T18:06:51.723 に答える