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 preview the Rollover Effect, I will need to bring this up in a browser. So save your CSS, go over to your browser. And now in the browser, as I hover over the table, as I hit the individual table rows,the entire row is going to highlight. Regardless of where I am inside of the table area. You'll also notice that the first column where we have the td element with a background-color that's also semitransparent allows us to see this highlighted color showing up underneath.
So we're getting this really nice layering effet between the first column and the hover state. Now another thing we can do to the hover stateto make it less abrupt is to add an animation to the background-color change. So let's go back to our CSS file. Let's find our row up here where we're targeting the table row element. I'm going to come in here and split this open. And then after border-top, let's add another property called transition. Put a colon, space. And now what we need to do here is pick the property we want to animate and the amount of time we want the animation to occur within.
So we'll type background dash color, then a space, then .6, and then the letter s, then a semicolon. So this will be six tenths of a second.And so with that property in place, go back to the browser. Now when you hover over the individual rows, you'll see the background-color will animate in as well as animate out. So now with our hover state working and the transition working, if we want to make the hover states a little bit more dramatic, let's go back to our CSS file. Let's find our table row hover.
Let's come in here and change the color to a much brighter white. So I'll set the red value to 255. Same thing for green. Same thing for blue.And then we'll set the alpha to .7. In addition, let's come in here and change the color of the type. So let's add a property before background-color. So we'll set the type color to black. So pound sign and three zeroes. And now we'll just bring this down on a separate line. And since we're changing the color in the hover state, we want to come up here to the transition and add color in here in addition to your background-color.
So after .6s, let's hit a comma, then a space, then type in the word color, space, .6s. So here we're specifying two different properties,background-color and color, for their transition. And then back in the browser we'll see a much more dramatic transition as we go from a dark color to a light color and change the type from white to black. Now if you do like the more dramatic transition, one thing you'll probably want to do is override that first column color.
Here we can see the white overlapping here. Doesn't look quite as nice as it did with the other color. So what we're going to need to do here is create another series of rules hooked onto the tr hover state so we can override the first td values as well. So to do this, let's go back to our CSS file. Let's come down here and let's copy the row where we're targeting the td:first-child. Let's copy this. Going to hit a few returns. I'm going to paste above here. Hit a space.
Put in our brackets. And what we're going to do is we're going to target the td:-first-child if it is inside of a table row in its hover state. So let's come up here and copy the tr colon hover. Let's come down here. Going to add a line before this and we're going to put this right after the table body and before the td. So if the first-child element is inside of a table row that is in its hover state, we're going to come in here and set some properties.
So let's split this open. And what we're going to do here is change the background-color. So we're going to set the background-color to rgba, put in our parentheses, and basically I want no color, but we're going to use rgba so we can override the color we have specified down here. So I'll do zero, comma zero, comma zero, comma and then we'll set the alpha to zero. So we're setting a new color which will override the color that we have for the first-child. However the color's opacity will be set to zero and we won't be able to see it and that we'll allow the table row color underneath to show through.
And now the last thing we need to do is add a transition property to the td:first-child. That way this change in property will match the other animations. So I'm going to come up here and I'm going to copy the transition colon background-color .6s. Copy that to the clipboard. Let's scroll down. Let's find the row we created earlier, td:first-child. We have a background-color down here. Let's hit a return and let's paste inthat transition down here. Then hit a semicolon.
Now it's worth mentioning, we could put the transition on this item here that's targeting the first child inside of the tr:hover. However, if I ever do anything else with this particular rule, I like to put my transition properties on the base elements instead of putting then on rows that use a Hover PseudoClass , So with this in place, let's go back to the browser one more time. Let's hit reload. And now when I hover over these individual elements you'll see that the background-color on the first child td elements, over on the left, will now fade to zero.
Showing the background color of the table row showing through. So this gives us the use experience that the hover state is overriding the color in the first column. When in actuality we are changing the color, we're just changing it to a color that has no opacity. Now at this point you're probably wanting to create a highlight for the columns as well as the rows. However unfortunately, there is now way to do this solely with CSS3. To visually illustrate what's happening here, in our HTML markup, every table row has a series of table data elements or the cells that are children of that row.
So when we add a Hover Pseudo-Class to the tr, this will also encompass all of the individual table data elements. Giving us the ability to highlight all of the elements at once. The individual td elements, however, have no parent/ child relationship to any other td that's not in its group. So for example, if we moved our cursor over top of the second td element, we don't have any way in CSS3 to target the same child number of another tr group. So in this case, we would need to use JavaScript to detect and count which particular child we're hovering overand then highlight each corresponding element in the other table rows.
And while that's certainly possible to do, that does go beyond the scope of this course where we're using HTML and CSS to style our table.And now with that, we've completed styling our HTML table with CSS. I hope you found this short course useful and as always, thanks for watching.
