In the Liehuo. Net tutorial, a reader asked today about the effect of switching an image when making the mouse. This effect is also called a roll-over effect ). Originally, most of these effects were implemented using Javascript. In fact, CSS can be easily used for making them.
Here is the simplest result. There are a lot of changes in the complex results. Interested readers can study it in depth.
Let's take a look at this effect:
<Html>
Tip: the code can be modified before running!The implementation of this effect is actually very simple. Step 1: Prepare two images with the same size. Here, the image size is X 34 pixels.
.
Step 2: Write the HTML code:
| <A href = "#"> bkjia.com </a> |
Is a very common hyperlink text, if you want to completely use images instead of any text, you can also.
Step 3: the CSS code is as follows:
| A: link, a: visited { A: hover, a: active { |
Well, this effect is complete, isn't it very simple. The following briefly explains the meaning of CSS code.
1st ~ 14 lines of code define the CSS style when the mouse does not pass through the hyperlink:
First, you need to change element a to a block-level element, and then set its height and width to be the same as that of the image.
The text is placed in the center of the image.
Finally, set the address of the background image.
The following 16th ~ 19 lines of code define the CSS style that needs to be changed when the mouse passes.
Change the color of the text from black to white, and replace the image with another one.
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
