使用CSS和JavaScript的动画

Question

https://order.dominos.com/en/

I recently started learning animation using CSS. Its quite easier than and light weight than JS and flash but I know there are limitations with CSS animation.

In the link above, I was just wondering if the effect on hovering over the "Order Now" div is achieved only through CSS or there's JS involved. I have been trying to single out the code from the page source responsible for the effect, but I've had luck only with the CSS. I cannot see any JS that alters the style of the div. Maybe I'm wrong.

Any help?

Answer 1

If you use Firefox as a browser install Firebug . It's easy then to lookup any CSS code used in a site. In site you linked link is changed using :hover in css Normal link:

span a {
border-radius: 7px 7px 0 0;
color: #0078AE;
display: block;
font-family: DominosFont,Arial,Helvetica,sans-serif;
padding: 10px 20px;
text-decoration: none;
}

Hover:

#genericHeader .mainNavigation span a:hover {
background: none repeat scroll 0 0 #FFFFFF;
color: #F9022D;
}