So now we're going to add a Rollover Effector a Hover Effect to the tableso that if the user moves their cursorover top of the table,we can highlight the entire rowthat's underneath the cursor.So to do this, we're going to target the table rowinside of the table body.So let's come up here and copy this row here.And we need to add this row after the rowwhere we're targeting the nth-child for the highlightingbecause we want the Hover Effect to take precedenceover 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 hoveris going to be the background-color.And we're going to set this to asemitransparent 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 columnwhere we have the td element witha background-color that's also semitransparentallows us to see this highlighted colorshowing up underneath.
So we're getting this really nice layering effetbetween 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 animationto the background-color change.So let's go back to our CSS file.Let's find our row up here where we're targeting thetable 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 pickthe property we want to animate and the amountof 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 inas well as animate out.So now with our hover state workingand the transition working,if we want to make the hover statesa 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 toa 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 changethe 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 addcolor 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 seea much more dramatic transitionas we go from a dark color to a light colorand change the type from white to black.Now if you do like the more dramatic transition,one thing you'll probably want to do isoverride 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 iscreate another series of ruleshooked onto the tr hover stateso 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 rowwhere 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 iswe're going to target the td:-first-childif 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 thisand we're going to put this right afterthe table body and before the td.So if the first-child element is inside of a table rowthat 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 ischange the background-color.So we're going to set the background-colorto rgba, put in our parentheses,and basically I want no color,but we're going to use rgba so we canoverride the color we have specified down here.So I'll do zero, comma zero,comma zero, comma and then we'll setthe alpha to zero.So we're setting a new color which will override the colorthat we have for the first-child.However the color's opacity will be set to zeroand we won't be able to see it and that we'll allow thetable row color underneath to show through.
And now the last thing we need to do isadd a transition property to the td:first-child.That way this change in property will matchthe other animations.So I'm going to come up here and I'm going to copythe 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 herethat's targeting the first child inside of the tr:hover.However, if I ever do anything elsewith this particular rule,I like to put my transition properties onthe base elements instead of putting then on rowsthat 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 elementsyou'll see that the background-color on the firstchild td elements, over on the left,will now fade to zero.
Showing the background color of the table rowshowing through.So this gives us the use experience thatthe hover state is overriding the colorin 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 createa 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 elementsor the cells that are children of that row.
And while that's certainly possible to do,that does go beyond the scope of this coursewhere 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 usefuland as always, thanks for watching.