1

edit: I've already seen this question, but I believe because the svg tag is nested within a link, this adds further complexity to accurately selecting the necessary elements

I'm looking for a way to fill in current element and previous sibling elements based on hover. I'm working with handlebars (through Ember) and normal CSS. Here's some code for context --

order-feedback-stars.hbs - this renders 5 stars, empty or filled based on if the tag is clicked 

<div class="feedback-star-container">
  {{#each stars as |s|}}
    <a {{action "selectStar" s.id}} class="feedback-star">
      {{#if s.selected}}
        {{svg-jar "feedback-full-star"}}
      {{else}}
        {{svg-jar "feedback-empty-star"}}
      {{/if}}
    </a>
  {{/each}}
</div>

I've been experimenting with different CSS classes and selectors, but all I've been able to do is highlight just the element that I'm hovering over with the following CSS --

feedback.scss 

svg:hover {
   fill: #1F4F46;
 }

Here is what the stars look like. If I hover over the 5th star, then the expected result is that all the previous stars get filled in green. Some advice would be much appreciated -- thanks so much!

Stars

Gennady Dogaev
  • 5,902
  • 1
  • 15
  • 23
hasaab
  • 63
  • 1
  • 5
  • added another duplicate, if you are dealing with nested element then you add another constraint not possible with pure CSS (a parent selector) .. but I advise you to take a look at the first duplicate and all the answer and you will see example showing what you want – Temani Afif Mar 19 '19 at 01:50
  • @AndyHoffman there is no super-powers, it's a duplicate question, if you think it's not you also have the *power* to vote to reopen the question and I am sure you know that there is a lot of answers already given for such situation (ex from the duplicate : https://stackoverflow.com/a/41652920/8620333, there is more if you follow the linked questions). I also have an answer by the way, but I will simply duplicate the already given ones – Temani Afif Mar 19 '19 at 02:05

0 Answers0