CSS 星级评定系统悬停答案

【问题标题】：CSS Star Rating System HoverCSS 星级评定系统悬停
【发布时间】：2022-09-27 15:36:47
【问题描述】：

我正在使用传单开发 Java 地图，并且正在地图上创建标记弹出窗口。在这些弹出窗口上，我希望有一个星级评分系统，在悬停时会预先突出显示所有星星，而在点击时，星星会保持填充状态。目前，我可以让它们在点击时保持填充状态，但一次只突出一个悬停。

这是我目前为星星设计的 CSS：

/*set the default color of the stars*/
.star-rating{
    color: #bebebe;
    font-size:2em;
}
/*create the star*/
.my-star:before{
    content:\"\\002605\";
}
/*remove the default style (italic) of the star*/
.my-star{
    font-style: unset !important;
    width: px;
}
/*set active star color*/
.is-active{
    color:#fb8900;
}
/*set color on hover*/
.my-star:hover{
    color: #fb8900;
}

这是我用于制作单个星形元素的 Javascript 代码（重复 5 次，数字递增）。

var popupStar1 = document.createElement(\"i\");
popupStar1.className =\"my-star star-1\";
popupStar1.setAttribute(\"data-star\", \"1\");

然后将其附加到 \'p\' 元素，然后将其附加到标记 \'div\' 元素：

var popupRating = document.createElement(\"p\");
popupRating.className =\"star-rating\";
popupRating.append(popupStar1);
popupRating.append(popupStar2);
popupRating.append(popupStar3);
popupRating.append(popupStar4);
popupRating.append(popupStar5);

popupDiv.append(popupRating);

这是生成的 HTML：

<p class=\"star-rating\">
  <i class=\"my-star star-1\" data-star=\"1\"></i>
  <i class=\"my-star star-2\" data-star=\"2\"></i>
  <i class=\"my-star star-3\" data-star=\"3\"></i>
  <i class=\"my-star star-4\" data-star=\"4\"></i>
  <i class=\"my-star star-5\" data-star=\"5\"></i>
</p>

这回答了你的问题了吗？ Is there a \"previous sibling\" selector?

标签： javascript java css leaflet hover

【解决方案1】：

较旧的答案：

尝试

.star-rating:hover .my-star{
   /* here goes the styling you want for all the stars */
   color: #fb8900;
}

新答案：

前面的元素没有选择器，但我们可以做一个这样的技巧：

/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}

.parent a:hover ~ a {
  color: blue;
}

<div class="parent">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

说明：Is there a "previous sibling" selector?其实已经回答了类似的问题

基本思想是：

元素具有特定的设计（在本例中为蓝色）
当父级悬停时，我们更改所有子级的样式（在本例中为红色）
同时，我们检测到特定子元素的悬停，并使用~ 选择器覆盖兄弟元素的样式（再次为蓝色）。

【讨论】：

这突出了所有的星星，我希望有类似的东西。如果我将鼠标悬停在第三颗星上，则只会突出显示第一颗第二颗和第三颗星。