创建一个五星评级控件，使用不带JavaScript的悬停图像

本文关键字：JavaScript 图像 悬停 控件 级控 一个 创建 | 更新日期: 2023-09-27 18:23:51

有没有一种方法可以在不使用Javascript的情况下实现五星评级控制，支持在悬停时更改五星的图像？点击将需要执行HTTP POST

为了更好地理解，我搜索了一个样本，发现http://orkans-tmp.22web.net/star_rating/（滚动至"选择选项快速示例"）

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

创建一个五星评级控件，使用不带JavaScript的悬停图像

下面是CSS3 Secrets 的一个例子

jsfiddle

您可以使用css选择器在没有javascript的情况下完成您想要的操作。

您可以使用CSS更改图像。只需应用一个类并为其提供：hover选项。

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

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

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

相关文章：