使用CSS

Question

我在我的应用程序中使用了一个名为RateYo的小jQuery插件。

它使用SVG作为创建星星的方法，这显然是对使用图像的传统方法的一个很大的改进，但它似乎阻止使用CSS来控制评级星的颜色。

因此，您可以轻松地执行以下操作：

$("#rateYo").rateYo({
    normalFill: "#A0A0A0",
    ratedFill: "#F39C12"
});

但是出于显而易见的原因，我想通过CSS而不是JavaScript来控制这些参数。

我尝试过像

这样简单的事情

.rating svg {
    fill: $blue3;
}

哪个会改变星星的颜色，但它也会阻止控件正常运行，因为它会将所有星星的颜色固定为CSS中提供的填充颜色。

那么，有人可以就如何通过CSS而不是JavaScript来控制ratedFill参数提供任何建议吗？

Answer 1

通过检查RateYo创建的标记，您可以找到相关的类并定位它们。

这是一个实例：

$(function() {
  $(".rating").rateYo({
    rating: 2.5
  });
});

.rating .jq-ry-normal-group svg {
  fill: silver;
}

.rating .jq-ry-rated-group svg {
  fill: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">

<div class="rating"></div>

Answer 2

我还为答案的有用性添加了其他选项。

＆＃13;

＆＃13;

glfw

＆＃13;

Bazel

＆＃13;

$(".rateyo").rateYo();

＆＃13;

＆＃13;

＆＃13;