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>PHP Chinese Network</title>
<style>
.link_1:hover{color:pink;}
</style>
</head>
<body>
<a href="#" class="link_1">Here is the PHP Chinese network</a>
</body>
</html>



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



After talking about the effect of mouse hover color change, now we should talk about the three effects of mouse hover, let's look at it together:

:hover{font-size:60px;}The mouse moves up and becomes bigger

:hover{text-decoration:underline;}The underline appears on the mouse

:hover{background:#ccc;} Mouse over to change the background color (: {background:#ccc;} link appears background color)

As mentioned above, we can do a lot of things in the mouse hover, we will show them together now, (I want to learn more about the css style related knowledge to the PHP Chinese website css study manual section) Now let us Look at the code and effects.

Html a tag css control style complete code:


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>PHP Chinese network</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 the PHP Chinese network</a>

<a href="#" class="link_2">Here is the PHP Chinese network</a>

<a href="#" class="link_3">This is PHP Chinese Network</a>

</body>

</html>



As above, we set up three css style code, the first one is color change, the second one is bigger, and the third one is background change.


Related Article

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.