How to make the HTML a tag change color when the mouse hovers, and how to control the mouse hover style of the a tag using css-CSS Tutorial-php.cn

How to make the HTML a tag change color when the mouse hovers, and how to control the mouse hover style of the a tag using css

寻∝梦

Sep 07, 2018 pm 01:38 PM

:hoveracss

This article mainly talks about html a tag making the mouse hover change color, and other styles about css controlling mouse hover. There are detailed example tutorials in it, which can help everyone learn faster. Next, let us look at this article together

First of all, let’s take a look at the a tag in html Color changes when the mouse is hovering:

Everyone should know the css attribute of the a tag in HTML when the mouse is hovering. Yes, that’s what we are talking about today.

:hover: This was said before when using the a tag to talk about css style. There are many functions of mouse hovering. Today we will talk about the a tag in HTML that changes color when hovered. Everyone should use this frequently.

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.link_1:hover{color:pink;}
</style>
</head>
<body>
<a href="#" class="link_1">这里是PHP中文网</a>
</body>
</html>

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

Let’s take a look at the display effect in Google Chrome:

How to make the HTML a tag change color when the mouse hovers, and how to control the mouse hover style of the a tag using css

Look, this is the effect before the mouse is placed. Now look at the mouse The effect of putting it up:

How to make the HTML a tag change color when the mouse hovers, and how to control the mouse hover style of the a tag using css

This is the result of moving the mouse up. Is it exactly the same as what we set?

Having finished talking about the discoloration effect of mouse hovering, now we should talk about the three other effects of mouse hovering. Let’s take a look at them together:

:hover{font-size：60px;}Move the mouse up and it will become larger
:hover{text-decoration:underline;}Move the mouse up and an underline will appear
:hover{background:#ccc;}Move the mouse up to change the background color (:{background:#ccc;} link appears with a background color)

Same as mentioned above, we can do a lot of things on mouse hover, and we will show them together now. (If you want to learn more about css style, go to the PHP Chinese websitecss learning manualColumn Learning) Now let’s take a look at the code and effects

html a tag css control style complete code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</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">这里是PHP中文网</a>
<a href="#" class="link_2">这里是PHP中文网</a>
<a href="#" class="link_3">这里是PHP中文网</a>
</body>
</html>

As above we set up three css The code of the style, the first is to change the color, the second is to change the size, and the third is to change the background.

Let’s look at the effects one by one first. After seeing the first one, let’s look directly at the second one:

How to make the HTML a tag change color when the mouse hovers, and how to control the mouse hover style of the a tag using css

Such as Picture, this is how it looks like none of them have been touched. Now let’s put the mouse on the second connection to see the effect:

How to make the HTML a tag change color when the mouse hovers, and how to control the mouse hover style of the a tag using css

This is the effect of putting it up. Isn’t it obvious that 60 pixels has great advantages, but you can experiment with small pixels and it will work. Now, let’s look at the third one:

How to make the HTML a tag change color when the mouse hovers, and how to control the mouse hover style of the a tag using css

This The third effect is as shown in the figure. When you put the mouse on it, it turns into a red background. Because we set red, the red background is displayed. This effect is still very obvious.

Okay, the above is what we are talking about in this article about the mouse-over discoloration of the HTML a tag and other styles of mouse-over (if you want to learn more about CSS styles, go to the PHP Chinese website css learning manual column learning). If you have any questions, you can ask below.

【Editor’s Recommendation】

How to set up an unordered list in css? Summary of list styles of css

How to use css to set the background color of text? Detailed explanation of css background color code

The above is the detailed content of How to make the HTML a tag change color when the mouse hovers, and how to control the mouse hover style of the a tag using css. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

The Lost CSS Tricks of Cohost.orgApr 25, 2025 am 09:51 AM

In this post, Blackle Mori shows you a few of the hacks found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal.

Next Level CSS Styling for CursorsApr 23, 2025 am 11:04 AM

Custom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.

Worlds Collide: Keyframe Collision Detection Using Style QueriesApr 23, 2025 am 10:42 AM

Interactive CSS animations with elements ricocheting off each other seem more plausible in 2025. While it’s unnecessary to implement Pong in CSS, the increasing flexibility and power of CSS reinforce Lee's suspicion that one day it will be a

Using CSS backdrop-filter for UI EffectsApr 23, 2025 am 10:20 AM

Tips and tricks on utilizing the CSS backdrop-filter property to style user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.

SMIL on?Apr 23, 2025 am 09:57 AM

Well, it turns out that SVG's built-in animation features were never deprecated as planned. Sure, CSS and JavaScript are more than capable of carrying the load, but it's good to know that SMIL is not dead in the water as previously

'Pretty' is in the eye of the beholderApr 23, 2025 am 09:40 AM

Yay, let's jump for text-wrap: pretty landing in Safari Technology Preview! But beware that it's different from how it works in Chromium browsers.

CSS-Tricks Chronicles XLIIIApr 23, 2025 am 09:35 AM

This CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.

Tailwind's @apply Feature is Better Than it SoundsApr 23, 2025 am 09:23 AM

Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obvio

See all articles