Css Star Rating

1.1.2.1 #permalink Hover

Styles for mouse hover effects. The star and all previous the one the mouse hovers are visible as filled and have opacity

Examples

Default styling

.hover-0

hover over no star

.hover-1

hover over 1st star

.hover-2

hover over 2nd star

.hover-3

hover over 3rd star

.hover-4

hover over 4th star

.hover-5

hover over 5th star

Markup

<div class="rating value-2 half hover [modifier class]">
  <div class="star-container">
      <div class="star">
           <svg class="star-filled">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
          </svg>
          <svg class="star-half">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
          </svg>
           <svg class="star-empty">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
          </svg>
      </div>
       <div class="star">
           <svg class="star-filled">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
          </svg>
          <svg class="star-half">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
          </svg>
           <svg class="star-empty">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
          </svg>
      </div>
      <div class="star">
           <svg class="star-filled">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
          </svg>
          <svg class="star-half">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
          </svg>
           <svg class="star-empty">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
          </svg>
      </div>
      <div class="star">
          <svg class="star-filled">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
          </svg>
          <svg class="star-half">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
          </svg>
          <svg class="star-empty">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
          </svg>
      </div>
      <div class="star">
          <svg class="star-filled">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
          </svg>
          <svg class="star-half">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-half"></use>
          </svg>
          <svg class="star-empty">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
          </svg>
      </div>
  </div>
</div>

Source: src/kss-documentation/modifiers.kss.scss, line 159