Can't understand why my hover isn't working

Question

I'm trying to style a table in CSS. However i can't use a class properly, even if I used div or a. Whatever I tried with the class it didn't worked, simply the hover isn't working. what you suggest me to do?

<html>
<style>
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;

  }
  
  th, td {
    text-align: center;
    padding: 8px;
    border-right: 3px solid red;
  }
  .ellenon {
      background-color: red;
      border-radius: 10px;
  }
  .ellenon :hover {
      background-color: green;
      border-radius: 30px;
  }

</style>
 <body>
        <p>Table</p>   
        <table style="width:100%" >
            <tr>
              <th >Condition</th>
              <th>Value</th>
            </tr>
            <tr>
             <td class="ellenon" style="text-align:center"> Humidity</td>
              <td style="text-align:center">15%</td>
            </tr>
            <tr>
              <td style="text-align:center">Temprature</td>
              <td style="text-align:center">25 °C</td>
            </tr>
          </table>
    </body>
</html>

Remove the space in `.ellenon :hover ` – j08691 Mar 14 '22 at 19:46 — j08691, Mar 14 '22 at 19:46

score 0 · Accepted Answer · answered Mar 14 '22 at 19:46

you had an extra space in here .ellenon :hover changing it to .ellenon:hover fixed the issue

<html>
<style>
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;

  }
  
  th, td {
    text-align: center;
    padding: 8px;
    border-right: 3px solid red;
  }
  .ellenon {
      background-color: red;
      border-radius: 10px;
  }
  .ellenon:hover { 
      background-color: green;
      border-radius: 30px;
  }

</style>
 <body>
        <p>Table</p>   
        <table style="width:100%" >
            <tr>
              <th >Condition</th>
              <th>Value</th>
            </tr>
            <tr>
             <td class="ellenon" style="text-align:center"> Humidity</td>
              <td style="text-align:center">15%</td>
            </tr>
            <tr>
              <td style="text-align:center">Temprature</td>
              <td style="text-align:center">25 °C</td>
            </tr>
          </table>
    </body>
</html>

No worries happen to all of us, if the answer helped you make sure you select it as accepted answer — Sarkar, Mar 14 '22 at 19:48

Can't understand why my hover isn't working

1 Answers1