HTML a tag how to let the mouse hover color, CSS control a tag mouse hover style

Source: Internet
Author: User
This article focuses on the HTML a tag that lets the mouse hover over color, as well as other styles of CSS that control mouse hover. There is a detailed example of the tutorial, you can let everyone learn faster, then let us look at this article together

First, let's look at the a tag in HTML when the mouse hovers over the color:

Everyone should know the CSS property of the A tag mouse hover in HTML, yes, that's what we're talking about today.

: hover: This was said in the previous CSS style with a tag. This mouse hover features a lot of, today we would like to say in HTML a tag hover color. This should be used by everyone.

Let's take a look at an example of the complete code:

<!doctype html><html><head><meta charset= "Utf-8" ><title>topic.alibabacloud.com< /title><style>.link_1:hover{color:pink;} </style></head><body><a href= "#" class= "Link_1" > here is topic.alibabacloud.com</a></ Body></html>

This is a basic code that defines a link_1 name. The effect is that when the mouse hangs over the text, the text will change color.

Let's look at the display effect in Google Chrome:

You see, this is the effect of the mouse has not been put up, now look at the effect of mouse put up:


This is the result of the mouse move up, is not the same as we set.

said the mouse hover color effect, and now we should say that there are three of mouse hover effect, we look at it together:

    • : hover{font-size:60px;} Mouse move up to big

    • : Hover{text-decoration:underline;} Underline appears on mouse cursor

    • : Hover{background: #ccc;} Mouse over to change background color (: {background: #ccc;} Link appears background color)

As mentioned above, we can do a lot of things in the mouse hover, we now show them together, (want to learn more about CSS style related to the TOPIC.ALIBABACLOUD.COMCSS Study manual section) now let's look at the code and effects.

HTML a tag CSS control style complete code:

<!doctype html><html><head><meta charset= "Utf-8" ><title>topic.alibabacloud.com< /title><style>.link_1:hover{color:pink;}. link_2:hover{font-size:60px;}. link_3:hover{background:red;} </style></head><body><a href= "#" class= "Link_1" > here is Topic.alibabacloud.com</a><a href= "#" class= "Link_2" > here is topic.alibabacloud.com</a><a href= "#" class= "Link_3" > This is topic.alibabacloud.com</a></body></html>.

As above we set three CSS style code, the first one is color, the second is bigger, the third is to change the background.

Let's first look at the effect, the first one to see, we will directly see the second one:

, this is a never-moving look, now we put the mouse on the second link above to see the effect:

This is put on the effect, is not very obvious, 60 pixel advantages, but we can use small pixel experiment, have effect on the line, now, let's look at the third bar:

This third effect, is to put the mouse on the time to turn into a red background, is because we set the red, so the red background is displayed. This effect is still very obvious.

OK, this is what we said in this article on the HTML a tag of the mouse hover color and mouse hover other styles of the article (want to learn more CSS style knowledge, to TOPIC.ALIBABACLOUD.COMCSS Study Manual column study). If you have questions, you can ask below.

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.

Tags Index: