使用没有JavaScript的悬停图片创建一个5星评级控件

Question

有没有办法实现5星评级控制，支持在悬停时更改5星的图像，而无需使用Javascript？点击将需要执行HTTP POST

为了更好地理解我搜索了一个样本并找到http://orkans-tmp.22web.net/star_rating/（滚动到“带有SELECT选项的快速示例”）

就我对HTML的了解而言，不可能有多个图像/按钮执行Post（了解用户给出的评级），同时更改多个背景图像。

Answer 1

以下是CSS3 Secrets

的示例

jsfiddle

你可以使用css选择器在没有javascript的情况下获得你想要的东西。

Answer 2

您可以使用CSS更改图像。只需应用一个类并给它：hover选项。

即。 .star：悬停 {   颜色：蓝色; }

我假设您希望所有以前的星星在悬停时也能改变颜色，这是可能的，但非常困难。我们将以5个开始的图像（全部突出显示）和单个未突出显示的图像开始。将五个未突出的开头放在彼此的顶部（设置绝对位置）。调整星星的意图，使每个星星都比最后一个缩进，并且它们被正确布置（实际上没有相互重叠）。在悬停时添加一个CSS，每个都有不同的CSS。它需要用5张高亮显示的图像替换图像。需要设置宽度，以便仅显示适当数量的星星。需要设置z-index，使其位于以前所有恒星的未高亮图像之上。

Answer 3

是否可以使用OnMouseOver和OnMouseOut选项创建相同的悬停效果？