2012-02-08 44 views
2

有没有一种方法可以实现5星评级控制,支持在悬停时更改5颗星的图像,而无需使用Javascript?点击将需要执行一个HTTP POST使用不带JavaScript的悬停图片创建5星评级控制

为了更好地了解我搜索了一个样本,发现http://orkans-tmp.22web.net/star_rating/(滚动到“与选择选项简单的例子”)

至于我的HTML知识去,不可能有多个执行Post的图像/按钮(要知道用户给出了哪个评级),并且同时改变多个背景图像。

回答

0

您可以使用CSS更改图像。只需申请一个班级并给它:悬停选项。

即 .star:hover { color:blue; }

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

+0

你是忍者。这没东西看。 – jadarnel27 2012-02-08 15:31:46

+0

我的猜测是,他会希望所有以前的明星也改变颜色,同时仍然是独立的实体。尽管如此,这使问题变得复杂。 – Servy 2012-02-08 15:33:16

+0

是的,我知道我可以使用CSS来更改一个图像。但我的问题是如何改变多个图像(正如我所说的,我不认为这是可能的),或者如何使用另一种技术来实现同样的效果 – citronas 2012-02-08 15:37:42

1

这里是CSS3 Secrets

jsfiddle

为例,用户可以使用CSS选择器,让你想不JavaScript的所作所为。

-1

是否有可能2使用OnMouseOverOnMouseOut选项来创建相同的悬停效果?