HTML and CSS Reference
In-Depth Information
.employeeData:hover {
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. an d
transitions .
Search WWH ::

Custom Search