CODEWITHSUNDEEP
htmlcss
user6420577
user6420577

Reputation: 225

Html hover style for each row

This is my view table:

<tr>
       <th><p>ID</p></th>
       <th><p>NAME</p></th>
       <th><p>CLASS</p></th>
       <th><p>EDIT</p></th>
       <th><p>DELETE</p></th>
</tr>

This is my css file:

table.mytable tr{
 background-color: #ffff99;
}

For highlights rows using hover, it is not working for me. i don't know where i did wrongly kindly help on this issue?

Many thanks, viswa

Upvotes: 0

Views: 102

Answers (4)

Br34th7aking
Br34th7aking

Reputation: 89

viswa.

To highlight on hover, you need to add the css for hover too. Since, you are enclosing your rows in <p> tags, you can use the following in you css file.

p:hover{ background-color: #ffff99; }

Make sure there is no space between : and the word 'hover'.

Upvotes: 0

Ivin Raj
Ivin Raj

Reputation: 3429

try this one:

ADD P:hover selector to hover color:

p:hover{
 background-color: #ffff99;
}

Thanks

DEMO HERE

OR

.mytable{
        width:100%; 
        border-collapse:collapse; 

    border:#4e95f4 1px solid;
    }
    .mytable td{ 
        padding:7px; 
    border:#4e95f4 1px solid;
    }

    .mytable tr{
        background: #b8d1f3;
    }

    .mytable tr:hover {
          background-color: #ffff99;
    }

DEMO UPDATED HERE

Upvotes: 0

Ryan
Ryan

Reputation: 989

tr:hover {
      background-color: #ffff99;
    }

Check here

Upvotes: 0

Mukesh Ram
Mukesh Ram

Reputation: 6328

User :hover selector to hover color:

table.mytable tr:hover{
 background-color: #ffff99;
}
<table class="mytable">
<tr>
       <th><p>ID</p></th>
       <th><p>NAME</p></th>
       <th><p>CLASS</p></th>
       <th><p>EDIT</p></th>
       <th><p>DELETE</p></th>
</tr>
<tr>
       <td>1</td>
       <td>ABC</td>
       <td>2</td>
       <td>edit</td>
       <td>delete</td>
</tr>
</table>

Upvotes: 1

Related Questions