onhover I want animation on table
| Firstname | Lastname | Age | Solution 1:
You can consider pseudo element to achieve such effect:
table {
position:relative;
z-index:0;
overflow:hidden;
}
td {
position:relative;
}
td:hover::before,
td:hover::after{
content:"";
position:absolute;
z-index:-1;
background:yellow;
}
td:hover::before{
top:0;
bottom:0;
right:-50vw;
left:-50vw;
}
td:hover::after {
left:0;
right:0;
top:-50vh;
bottom:-50vh;
}
<tableborder="1"><tr><th>Firstname</th><th>Lastname</th><th>Age</th></tr><tr><td>Jill</td><td>Smith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr></table>
Solution 2:
Use the transition property on the table:onhover selector.
|---|
Post a Comment for "On Hover Animation To Table In Html"