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

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 > // LET SAY USER HOVER THIS DIV, WILL SHOW YELLOW COLOR
                 Apple1
                 </div>
                 <div > // 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,

CodePudding user response：

.table-responsive table .hover1:hover  {
background-color: yellow;
}

.table-responsive table .hover2:hover {
background-color: orange;
}

      <div >
      <table >
          <thead>
              <tr>
                  <th>Period/Range</th>
                  <th>n30</th>



              </tr>
          </thead>
             <tbody>
             <tr>
               <td>
                 <div >
                 Apple1
                 </div>
                 <div >
                 pineApple1
                 </div>
               </td>
               <td>testing purpose</td>
             </tr>
             <tr>
               <td>test</td>
               <td>
                 <div>
                 Apple2
                 </div>
                 <div>
                 pineApple2
                 </div>
               </td>
             </tr>
             </tbody>
        </table>
   </div>

This should work perfectly for you,

PS: pay attention to your attribute if you are not using this code inside a react app because ClassName is specific attribute for react

CodePudding user response：

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

CodePudding user response：

As mentioned by @OthManE01, first warning is for the use of the attribute ClassName, that's specific for react, but not interpreted by HTML instead. Second mistake is in the css selector. Going up the selection in your code you're gonna make the CSS-rule for an element with class .hover1 (or .hover2)

-direct child of a div:hover

-direct child of td

-direct child of tr

-direct child of tbody of all table with .returnSpreadIndex class, an so on...

Instead you wanna select div.hover1:hover and div.hover2:hover. So the right CSS-rule could be:

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

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