Home Web Front-end CSS Tutorial css mouse hover color change: hyperlink font changes color when mouse hovers

css mouse hover color change: hyperlink font changes color when mouse hovers

Nov 22, 2018 pm 05:30 PM
Discoloration Change


The content of this article is about css mouse hover color change: the hyperlink font changes with the mouse hover color, there is a certain reference Value, friends in need can refer to it, I hope it will be helpful to you.

css sets the font to change color when the mouse hovers over the hyperlink, and css sets the layout to change color when the mouse hovers over it.

The text changes color when the mouse is hovering over the font. Usually for the change of font color of the hyperlink anchor text, the pseudo class: hover is used.

a{ color:#00F}
a:hover{ color:#F00}
Copy after login

Explanation: The default hyperlink font color is blue "color:#00F", and when the mouse is hovering, the font color is red "color:#F00". It can be seen that to change the mouse hover color, set a:hover

1, div css example code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标悬停颜色改变 实例</title>
<style>
a{ color:#00F}/* 默认超链接字体颜色为蓝色 */
a:hover{color:#F00}/* 默认超链接字体悬停时颜色为红色 */
.zhiding a{ color:#090}
.zhiding a:hover{ color:#F0F}
</style>
</head>
<body>
<p>欢迎来到<a href="http://www.php.cn/">php</a>学习php技术!</p>
<p class="zhiding">指定对象<a href="#">超链接</a>字体悬停颜色改变!</p>
</body>
</html>
Copy after login

The effect is as follows:

css mouse hover color change: hyperlink font changes color when mouse hovers

Instructions :

1), set the default web page hyperlink font to blue, and red when the mouse is hovering (a{ color: #00F} a:hover{color: #F00});

2), and also set the font color of the hyperlink in the specified object to green by default, and the font color to pink when the mouse is hovering.

3. Summary

css mouse hover discoloration Apply hyperlink pseudo-class ":hover" to set css style changes. In addition to color changes, you can also define mouse hover font size and font boldness , background and other style changes, and flexibly use other CSS styles to change font colors.

The above is the complete introduction to the implementation of css mouse hover color change: hyperlink font changes color with mouse hover. If you want to know more about CSS3 tutorial, please pay attention to PHP Chinese website .



The above is the detailed content of css mouse hover color change: hyperlink font changes color when mouse hovers. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is the keyboard shortcut for switching to black and white mode in win10? What is the keyboard shortcut for switching to black and white mode in win10? Jan 10, 2024 pm 01:26 PM

The win10 system launched by Microsoft has many new features compared to previous versions. For example, you can use the color filter, which is the color filter shortcut, to change the overall display of win10 to black and white. Some friends may not know how to set up this effect. So let me tell you now. Hope it helps you~ What is the solution to the shortcut key to change win10 to black and white? 1. You can use the shortcut ++ to turn on or off the color filter. 2. If you want to completely turn off the color filter, you can right-click the start logo on the taskbar. Select option 3 in the pop-up menu. Select option 4 in the opened interface. Select option 5 using the easy bar on the left side of the opened page. In the color filter interface on the right side of the opened page we will see a

How to change the starting delivery price of Meituan Takeout merchant version How to change the starting delivery price of Meituan Takeout merchant version Mar 27, 2024 pm 07:20 PM

In the operation process of the Meituan Takeout Merchant Edition, the setting of the starting delivery price is a crucial link. A reasonable starting delivery price can not only help merchants control costs, but also increase order amounts to a certain extent, thus increasing overall revenue. However, many merchants don’t know much about how to modify the minimum delivery price. So in the following article, the editor of this website will bring you detailed starting price setting guide for merchants. If you want to know more, come to the following article to find out! In the Meituan Takeout Merchant Center, log in and enter the store settings, then select store management. In the switch navigation at the top of the store management page, select delivery information, and then click Add Delivery Area to complete the operation. Once you add a location, the corresponding shipping costs will automatically appear. After completing your order, you will receive

How to change border color on Win7 computer How to change border color on Win7 computer Jul 17, 2023 am 08:53 AM

Win7 system can be said to be one of the most commonly used computer systems, but recently some friends who use Win7 system want to change their frame color, but do not know how to change the frame color of Win7 computer. Let's take a look at how to change the frame color of Win7 computer below. Methods. How to change the border color on Win7 computer 1. Right-click a blank area of ​​the desktop in the pop-up menu bar and select [Personalize]; 2. Enter the personalization interface and click on the window color under the theme; 3. We can see how many windows have been set for us window color. Double-click the color we want to apply, and we can see that the color of the window and taskbar is set successfully; 4. Click the concentration option under the color to increase or decrease the concentration of the window color. The heavier the concentration;

How to change the icon size in win11 How to change the icon size in win11 Jul 04, 2023 pm 03:57 PM

How to change the icon size in win11? Win11 is a very easy-to-use computer operating system version. It occupies half of the computer operating systems in the world today. Many friends also found that this version of the Windows system has many functions. Some friends asked questions and said Sometimes I can't see clearly the icon display on the desktop. How can I change its size? So today, the editor will use the following article to explain the following question for you. Interested students can read below! How to adjust the size of win11 icons: Press and hold the mouse and use the "ctrl" key to adjust the size. 1. The desktop icons are too large. 2. How to adjust the size of win11 icons? First, press and hold "ctrl" in the lower left corner of the keyboard. 3. Mouse wheel

Control element visibility using jQuery Control element visibility using jQuery Feb 20, 2024 am 10:25 AM

Title: Using jQuery to change the display attribute of elements In web development, we often encounter the need to dynamically change the display and hiding of elements based on user operations or page status. Using jQuery to operate the display attribute of an element is a common and convenient method. In this article, we will introduce how to use jQuery to change the display attribute of an element and provide specific code examples. First, we need to import the jQuery library file. Pass the following code in the HTML file

How to change the save location of win10 recording How to change the save location of win10 recording Jul 22, 2023 pm 08:05 PM

If after recording the video, the recorded video cannot be found at the first time, then change the save location. How to change the save location of win10 screen recording? How to change the saving path of recorded videos in Win10. Let’s watch it with the editor. 1. Enter the local video folder, right-click "Properties". Click "Place". 3. Click the Move button. 4. Select any folder as a new saved folder. 5. Click Yes to modify the saved folder.

How to change the default c drive to d drive in win7 How to change the default c drive to d drive in win7 Detailed introduction How to change the default c drive to d drive in win7 How to change the default c drive to d drive in win7 Detailed introduction Jul 12, 2023 pm 07:09 PM

The c drive is the user's default C drive. After activating the computer, the user will see that the C drive is the default C drive. The user's important system files are in this drive, so if the user accidentally deletes the It will be inconvenient to store some important files or install some apps in the C drive. Therefore, how to change the default C drive to the D drive in Win7? Next, I will tell you how to change the default C drive to the D drive in Win7. . How to change the default c drive to d drive in win7 1. First open the d drive on my computer; 2. Create a file storage path on the d drive; 3. Open the operation bar with the "win+r" key combination and type "regedit" "Open the registry editor; 4. Copy the computer path above"\HKEY_LO

An overview of the new features of CSS3: How to use CSS3 to change the layout of web pages An overview of the new features of CSS3: How to use CSS3 to change the layout of web pages Sep 10, 2023 pm 02:39 PM

Overview of the new features of CSS3: How to use CSS3 to change the layout of web pages. In recent years, with the development of Internet technology, more and more people have begun to create their own web pages. As an important part of web design, layout design directly affects the overall effect and user experience of the web page. CSS3, as the latest version of cascading style sheets, introduces many new features that can help us better change the layout of web pages. This article will introduce these new features one by one, and demonstrate how to use CSS3 to change the layout of web pages through cases. 1. Box model and cloth

See all articles