'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,

htmlcss


Solution 1:[1]

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

Solution 2:[2]

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

.table-responsive table .hover2:hover {
background-color: orange;
}
      <div class="table-responsive">
      <table class="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">
                 Apple1
                 </div>
                 <div class="hover2">
                 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

Solution 3:[3]

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;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 OthManE01
Solution 3

Related Questions