In the previous video, we created customize styles for links in their different states. In this video, we're going to do the same for <div> tags.

Unlike links, the hover state for is the only option available for<div> tags, as visited and active states are unnecessary.

First, we are going to add the hover effect for our package class. I prefer to put the pseudo class just under the main class.

In this .package:hover, I'm going to change the background and color to green, as well as change the cursor type to a pointer. The code is:

.package {
  background-color: #e8e8e8;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 20px;
  margin: 50px;
  font-size: 1.2em;
  border-bottom: 10px solid green;
  width: 200px;
}

.package:hover {
  background-color: green;
  color: white;
  cursor: pointer;
}

When you hover over an element, it changes to green.

One thing minor discrepancy is the instant change makes the page feel gaudy. Using CSS, we are able to make this transition smoother. To do so, go to .package class, and add transition code. The transition should focus only on the background color with a fade-in time of 500ms, a style titled ease-out, and a fade-out time of one second.

.package {
  transition: background-color 500ms ease-out 1s;
  background-color: #e8e8e8;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 20px;
  margin: 50px;
  font-size: 1.2em;
  border-bottom: 10px solid green;
  width: 200px;
}

Now, we'll have to include this behavior for all browsers - Chrome, Mozilla, Opera and IE.

.package {
  -webkit-transition: background-color 500ms ease-out 1s;
  -moz-transition: background-color 500ms ease-out 1s;
  -o-transition: background-color 500ms ease-out 1s;
  transition: background-color 500ms ease-out 1s;
  background-color: #e8e8e8;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 20px;
  margin: 50px;
  font-size: 1.2em;
  border-bottom: 10px solid green;
  width: 200px;
}

If you refresh, you can see the smooth effect of the transition.

The above code is only for changing the background color however, if you want the same effect for all your elements, you can simply change background-color to all. This will remove the white fade-in effect and will remain a mild transition to green.

Refrences
ebook