Add more than two text link effects to your Web page

Source: Internet
Author: User
Links | Web page Many people may have learned how to make link text changes with the mouse click state of the effect, this is the use of CSS, you may only know how to set a state, such as the mouse over the text, text into red. But this is the whole page is so uniform effect, but there is no way in a page has a variety of effects? For example, there are two text links on the page, and we think one of them is red when the mouse is on, and the other is yellow. The answer is yes. If the handwriting code, it is only a few lines. Given that most people are using it now, let's talk about how to do that in Dreamweaver4.

1: Open Dreamweaver, create a new file, do two text with links.
2:SHIFT+F11, open the CSS Styles Control Panel, a new use CSS selector, you need to pay attention to, you choose a CSS selector to choose the A:hover, and did not appear on the image of the effect, in fact, the skill is here! We manually change the a:hove to A.one:hove, that is, add a point and a name after a (can be any English, not a number). Set it up, then click OK
3: In the pop-up style definition for One.a:hover panel to set the effect you want, here we choose the font color is red. After setting up Click OK
4: Repeat the 2nd, 3 steps, the 2nd step need to modify the place is the A.one:hover back to A:hover (is directly selected A:hover can be. The 3rd step is to change the color of the font, we set to yellow.
5: Now the preview has no effect, we still need to move a little surgery, we look at the settings after the CSS styles Control Panel, the following figure, there will be a one
6: In the selection of the page you want to when the mouse to put up when the link text is red, and then in the CSS Styles Control Panel with the mouse to select one
7: Now your page has two effects.
Summary: According to the above logic, we can make an unlimited text link effect, the key is a:hover a:active a:link a:visited Modification, the previous introduction is only a:hover, in fact, three can. As long as the reference to the 2nd step of the settings can be easily done.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.