How to access specific div inside td and showing different background color when hovering

I have a table and in my td, I will have div. I need know how let user see different color when hovering at specific div

My code

      <div className="table-responsive">
      <table className="table table-responsive table-hover table-condensed returnSpreadIndex">
          <thead>
              <tr>
                  <th>Period/Range</th>
                  <th>n30</th>



              </tr>
          </thead>
             <tbody>
             <tr>
               <td>
                 <div class="hover1"> // LET SAY USER HOVER THIS DIV, WILL SHOW YELLOW COLOR
                 Apple1
                 </div>
                 <div class="hover2"> // IF USER HOVER THIS DIV, WILL SHOW ORANGE COLOR
                 pineApple1
                 </div>
               </td>
               <td>testing purpose</td>
             </tr>
             <tr>
               <td>test</td>
               <td>
                 <div>
                 Apple2
                 </div>
                 <div>
                 pineApple2
                 </div>
               </td>
             </tr>
             </tbody>
        </table>
   </div>

after I lookup solution for this , finally can come out with this code but it is not working either

div.table-responsive table.returnSpreadIndex tbody > tr > td>div:hover .hover1 {
background-color: yellow;
}

div.table-responsive table.returnSpreadIndex tbody > tr > td>div:hover .hover2 {
background-color: orange;
}

Thank you,

>Solution :

.hover1:hover { background-color: yellow} .hover2:hover {background-color: orange}