Home > Developer > JavaScript
The mouse goes through the icon switching effect, and the Mouse icon Switching Effect
We are no stranger to the magical effect of switching the mouse over the icon. How can we implement it with code?
Html:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Style type = "text/css">
{
Display: block;
Width: 67px;
Height: 32px;
Background: url (images/ico.png) no-repeat;
} A: hover
{
Background-position: bottom;
} </Style>
</Head> <body> <a href = "#"> </a> </body>Image:
Note:
1. hyperlink <a> is an in-Row Element and cannot directly define the width and height. Therefore, you need to use display: block to convert it into a block element.
2. The background image is aligned with the upper left corner of the box by default. When you move the mouse, you need to align the background image with the bottom of the box, that is, use background-position: bottom ;.
Effect:
When the mouse goes through the front mouse
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
