From the course: Design the Web: Styling a Table

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Adding hover states (rollovers) to rows

Adding hover states (rollovers) to rows - phpMyAdmin Tutorial

From the course: Design the Web: Styling a Table

Start my 1-month free trial Buy for my team

Adding hover states (rollovers) to rows

“

- [Voiceover] So now we're going to add a Rollover Effect or a Hover Effect to the table so that if the user moves their cursor over top of the table, we can highlight the entire row that's underneath the cursor. So to do this, we're going to target the table row inside of the table body. So let's come up here and copy this row here. And we need to add this row after the row where we're targeting the nth-child for the highlighting because we want the Hover Effect to take precedence over this particular row. So after that row, we'll paste this one, add a colon, we'll add our hover pseudo-class, put in our brackets, and now the property that I want to change on hover is going to be the background-color. And we're going to set this to a semitransparent gold color. So we use rgba, put in our parentheses and semicolon. For red, we're going to set this to 231. For green, we're going to set this to 147. Zero for blue. And then .6 for the alpha. Giving us a 40% transparent color. Now to…

Contents