Shulou(Shulou.com)06/02 Report--

This article will explain in detail how dw makes mouse icons to change colors. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

The method is as follows

1. Prepare a pair of icons of the same size and different colors.

2. Then in the body document, insert the first picture, the code is

3. After inserting the first picture, insert another picture below which is different from his color, using the same level relationship.

4. Add positioning position:relative; to their parent set ul and set absolute positioning for the first picture. The position of ul li:nth-child (1) {position:absolute;left:0;top:0;} can be adjusted according to your needs.

5. the processing method for the second picture is the same, but also the absolute positioning, and the position is the same as the first picture, so that after positioning, the second picture will cover the top of the first picture.

Ul li:nth-child (2) {position:absolute;left:0px;top:0;}

6. Set the second picture to hide display:none; before starting. Display the second picture when the mouse passes over.

7. After hiding the second picture, set that when the mouse passes over ul, the second picture displays ul:hover li:nth-child (2) {display:block;}

This is the end of this article on "how dw makes mouse icons to change color". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.