HTML and CSS Reference
In-Depth Information
.employeeData:hover {
color:#682020;
background-color:#ff6a00;
font-weight:bold;
}
The CSS properties specified in
employeeData
are applied when the
<div>
is in the normal state (the
user isn't hovering the mouse over it), whereas the CSS properties specified in
employeeData:hover
are
applied when the user hovers the mouse pointer over the
<div>
. Currently, using these CSS rules doesn't
add any transition effect to the
<div>
. To add a transition effect, you need to modify the
employeeData
rule
as follows:
.employeeData {
...
-moz-transition: color 3s,background-color 3s;
-webkit-transition: color 3s,background-color 3s;
-o-transition: color 3s,background-color 3s;
}
The modified
employeeData
rule uses the
transition
property prefixed with browser-specific prefixes.
The
transition
property consists of a comma-separated list of properties to be included in the transition
effect and the time duration in seconds for which the transition effect is played. In this example, the
color
and
background-color
properties change from their old values to new values in three seconds. Figure 13-19
shows how the
<div>
looks before and after the transition.
Figure 13-19.
Applying transitions during mouse hover
In the absence of the
transition
property, the
<div>
instantaneously changes its background color
from
#f3f3f3
to
#ff6a00
when hovering begins and from
#ff6a00
to
#f3f3f3
when the mouse leaves the
<div>
. However, with
transition
in place, the same change of background color takes place in three
seconds rather than instantly, resulting in an animation effect.
n
Note
You can also add other details to the transition effect, such as timing functions. You can read more at
www.
transitions
.
