hover over div affect sibling div

Question

I am creating a star rating using SVG

<div class="stars-rating flex">
        <div class="star">
          <svg id="Icon_Star_16_Idle" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
            <path id="Path_364" data-name="Path 364" d="M16,418.784q0-.373-.539-.464l-4.827-.736L8.471,413q-.182-.413-.471-.413T7.529,413l-2.164,4.587-4.827.736q-.538.091-.538.464a.783.783,0,0,0,.24.484l3.5,3.569-.827,5.041a1.736,1.736,0,0,0-.019.2.615.615,0,0,0,.1.358.343.343,0,0,0,.3.146.788.788,0,0,0,.385-.121L8,426.084l4.318,2.38a.751.751,0,0,0,.384.121.333.333,0,0,0,.293-.146.615.615,0,0,0,.1-.358,1.583,1.583,0,0,0-.009-.2l-.827-5.041,3.49-3.569A.74.74,0,0,0,16,418.784Z" transform="translate(0 -412.584)" fill="#d6d8de"/>
          </svg>
        </div>
        <div class="star">
          <svg id="Icon_Star_16_Idle" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
            <path id="Path_364" data-name="Path 364" d="M16,418.784q0-.373-.539-.464l-4.827-.736L8.471,413q-.182-.413-.471-.413T7.529,413l-2.164,4.587-4.827.736q-.538.091-.538.464a.783.783,0,0,0,.24.484l3.5,3.569-.827,5.041a1.736,1.736,0,0,0-.019.2.615.615,0,0,0,.1.358.343.343,0,0,0,.3.146.788.788,0,0,0,.385-.121L8,426.084l4.318,2.38a.751.751,0,0,0,.384.121.333.333,0,0,0,.293-.146.615.615,0,0,0,.1-.358,1.583,1.583,0,0,0-.009-.2l-.827-5.041,3.49-3.569A.74.74,0,0,0,16,418.784Z" transform="translate(0 -412.584)" fill="#d6d8de"/>
          </svg>
        </div>
        <div class="star">
          <svg id="Icon_Star_16_Idle" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
            <path id="Path_364" data-name="Path 364" d="M16,418.784q0-.373-.539-.464l-4.827-.736L8.471,413q-.182-.413-.471-.413T7.529,413l-2.164,4.587-4.827.736q-.538.091-.538.464a.783.783,0,0,0,.24.484l3.5,3.569-.827,5.041a1.736,1.736,0,0,0-.019.2.615.615,0,0,0,.1.358.343.343,0,0,0,.3.146.788.788,0,0,0,.385-.121L8,426.084l4.318,2.38a.751.751,0,0,0,.384.121.333.333,0,0,0,.293-.146.615.615,0,0,0,.1-.358,1.583,1.583,0,0,0-.009-.2l-.827-5.041,3.49-3.569A.74.74,0,0,0,16,418.784Z" transform="translate(0 -412.584)" fill="#d6d8de"/>
          </svg>
        </div>

when hovering over a star I want it to change color and the star below it too. So if I hover over the second star I want the first star to change color too. How do I accomplish this?

Thanks :)