Article directory
- Show results
- Implementation steps
-
- 1. Add background color
- 2. Modify the background color
- 3. Adjust the size of the background
- 4. Cancel the repeated drawing of the background
- 5. Reduce height
- 6. Set the background drawing position
- 7. Hide the background
- 8. Add mouse move event
- 9. Smoothly show/hide underline
- 10. Adjust the position of the background image
- 11. Adjust the position when the mouse moves in
Effect display
- When the mouse moves into the content, the underline is drawn from the
leftto therightside - When the mouse moves out of the content, the underline will be erased from
lefttoright
Implementation steps
1. Add background color
We add a black background to the content background: #000;
.title span{<!-- -->
background: #000;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Mouse (move in/out) smooth (display/hide) underline</title>
<link rel="stylesheet" href="./index.css">
<style>
.title {<!-- -->
color:#333;
line-height: 2;
font-family:"Italics";
}
.title span{<!-- -->
background: #000;
}
</style>
</head>
<body>
<p class="title">
<span>
Instructor: "Students, are you ready?"<br>
Students: "Always ready, always ready, always ready.<br>
         We were born under the red flag and grew up in the spring breeze. The people have faith, the country has strength, and the nation has hope.<br>
         Everywhere you look is China; the five stars shining are all faith.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp; "
</span>
</p>
</body>
</html>
Effect
2. Modify the background color
Replace the black background background: #000; with a colored gradient background background: linear-gradient(to right,#ec695c,#61c454);
.title span{<!-- -->
background: linear-gradient(to right, #ec695c, #61c454);
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Mouse (move in/out) smooth (display/hide) underline</title>
<link rel="stylesheet" href="./index.css">
<style>
.title {<!-- -->
color:#333;
line-height: 2;
font-family:"Italics";
}
.title span{<!-- -->
background: linear-gradient(to right, #ec695c, #61c454);
}
</style>
</head>
<body>
<p class="title">
<span>
Instructor: "Students, are you ready?"<br>
Students: "Always ready, always ready, always ready.<br>
         We were born under the red flag and grew up in the spring breeze. The people have faith, the country has strength, and the nation has hope.<br>
         Everywhere you look is China; the five stars shining are all faith.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp; "
</span>
</p>
</body>
</html>
Effect
3. Resize the background
Set the width to 100 pixels, and the height to 10 pixels (background-size: 100px 10px;), and the background is drawn repeatedly.
.title span{<!-- -->
background: linear-gradient(to right, #ec695c, #61c454);
background-size: 100px 10px;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Mouse (move in/out) smooth (display/hide) underline</title>
<link rel="stylesheet" href="./index.css">
<style>
.title {<!-- -->
color:#333;
line-height: 2;
font-family:"Italics";
}
.title span{<!-- -->
background: linear-gradient(to right, #ec695c, #61c454);
background-size: 100px 10px;
}
</style>
</head>
<body>
<p class="title">
<span>
Instructor: "Students, are you ready?"<br>
Students: "Always ready, always ready, always ready.<br>
         We were born under the red flag and grew up in the spring breeze. The people have faith, the country has strength, and the nation has hope.<br>
         Everywhere you look is China; the five stars shining are all faith.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp; "
</span>
</p>
</body>
</html>
Effect
4. Cancel background repeated drawing
The background style adds a no-repeat to cancel the repeated drawing of the background.
.title span{<!-- -->
background: linear-gradient(to right, #ec695c, #61c454) no-repeat;
background-size: 100px 10px;
}
Example
Mouse (move in/out) smooth (display/hide) underline
Instructor: "Students, are you ready?"
Students: "Always ready, always ready, always ready.
         We were born under the red flag and grew up in the spring breeze. The people have faith, the country has strength, and the nation has hope.
         Everywhere you look is China; the five stars shining are all faith.
         We would like to use our youth to defend the flourishing China.
         We would like to use our youth to defend the flourishing China.
         We would like to use our youth to defend the flourishing China.
& amp; emsp;
& amp; emsp;
& amp; emsp;
& amp; emsp;
& amp; emsp;
& amp; emsp; "
Effect
5. Reduce height
Change the background size background-size from 10 pixels to 2 pixels (background-size: 100px 2px;)
.title span{<!-- -->
background: linear-gradient(to right, #ec695c, #61c454) no-repeat;
background-size: 100px 2px;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Mouse (move in/out) smooth (display/hide) underline</title>
<link rel="stylesheet" href="./index.css">
<style>
.title {<!-- -->
color:#333;
line-height: 2;
font-family:"Italics";
}
.title span{<!-- -->
background: linear-gradient(to right, #ec695c, #61c454) no-repeat;
background-size: 100px 2px;
}
</style>
</head>
<body>
<p class="title">
<span>
Instructor: "Students, are you ready?"<br>
Students: "Always ready, always ready, always ready.<br>
         We were born under the red flag and grew up in the spring breeze. The people have faith, the country has strength, and the nation has hope.<br>
         Everywhere you look is China; the five stars shining are all faith.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp; "
</span>
</p>
</body>
</html>
Effect
6. Set background drawing position
Set the background style background to both the left and the bottom position (left bottom)
.title span{<!-- -->
background: linear-gradient(to right,#ec695c,#61c454) no-repeat left bottom;
background-size: 100px 2px;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Mouse (move in/out) smooth (display/hide) underline</title>
<link rel="stylesheet" href="./index.css">
<style>
.title {<!-- -->
color:#333;
line-height: 2;
font-family:"Italics";
}
.title span{<!-- -->
background: linear-gradient(to right,#ec695c,#61c454) no-repeat left bottom;
background-size: 100px 2px;
}
</style>
</head>
<body>
<p class="title">
<span>
Instructor: "Students, are you ready?"<br>
Students: "Always ready, always ready, always ready.<br>
         We were born under the red flag and grew up in the spring breeze. The people have faith, the country has strength, and the nation has hope.<br>
         Everywhere you look is China; the five stars shining are all faith.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp; "
</span>
</p>
</body>
</html>
Effect
7. Hide background
Set the width of the background to 0 pixels background-size: 0px 2px;
.title span{<!-- -->
background: linear-gradient(to right,#ec695c,#61c454) no-repeat left bottom;
background-size: 0px 2px;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Mouse (move in/out) smooth (display/hide) underline</title>
<link rel="stylesheet" href="./index.css">
<style>
.title {<!-- -->
color:#333;
line-height: 2;
font-family:"Italics";
}
.title span{<!-- -->
background: linear-gradient(to right,#ec695c,#61c454) no-repeat left bottom;
background-size: 0px 2px;
}
</style>
</head>
<body>
<p class="title">
<span>
Instructor: "Students, are you ready?"<br>
Students: "Always ready, always ready, always ready.<br>
         We were born under the red flag and grew up in the spring breeze. The people have faith, the country has strength, and the nation has hope.<br>
         Everywhere you look is China; the five stars shining are all faith.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp; "
</span>
</p>
</body>
</html>
Effect
8. Add mouse move event
Set the width of the background 100% in the event hover when the mouse moves into the content
.title span:hover{<!-- -->
background-size: 100% 2px;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Mouse (move in/out) smooth (display/hide) underline</title>
<link rel="stylesheet" href="./index.css">
<style>
.title {<!-- -->
color:#333;
line-height: 2;
font-family:"Italics";
}
.title span{<!-- -->
background: linear-gradient(to right,#ec695c,#61c454) no-repeat left bottom;
background-size: 0px 2px;
}
.title span:hover{<!-- -->
background-size: 100% 2px;
}
</style>
</head>
<body>
<p class="title">
<span>
Instructor: "Students, are you ready?"<br>
Students: "Always ready, always ready, always ready.<br>
         We were born under the red flag and grew up in the spring breeze. The people have faith, the country has strength, and the nation has hope.<br>
         Everywhere you look is China; the five stars shining are all faith.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp; "
</span>
</p>
</body>
</html>
Effect
9. Smooth display/hide underline
Add a smooth transition to the background size change event transition: background-size 1300ms;.
- When the mouse moves into the content, the underline is drawn from the
leftto therightside - When the mouse moves out of the content, the underline will be erased from
righttoleft
.title span{<!-- -->
transition: background-size 1300ms;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Mouse (move in/out) smooth (display/hide) underline</title>
<link rel="stylesheet" href="./index.css">
<style>
.title {<!-- -->
color:#333;
line-height: 2;
font-family:"Italics";
}
.title span{<!-- -->
background: linear-gradient(to right,#ec695c,#61c454) no-repeat left bottom;
background-size: 0px 2px;
transition: background-size 1300ms;
}
.title span:hover{<!-- -->
background-size: 100% 2px;
}
</style>
</head>
<body>
<p class="title">
<span>
Instructor: "Students, are you ready?"<br>
Students: "Always ready, always ready, always ready.<br>
         We were born under the red flag and grew up in the spring breeze. The people have faith, the country has strength, and the nation has hope.<br>
         Everywhere you look is China; the five stars shining are all faith.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp; "
</span>
</p>
</body>
</html>
Effect
10. Adjust the position of the background image
Set the background style background to the right position (right)
- When the mouse moves into the content, the underline is drawn from
righttoleft - When the mouse moves out of the content, the underline will be erased from
lefttoright
.title span{<!-- -->
background: linear-gradient(to right,#ec695c,#61c454) no-repeat right bottom;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Mouse (move in/out) smooth (display/hide) underline</title>
<link rel="stylesheet" href="./index.css">
<style>
.title {<!-- -->
color:#333;
line-height: 2;
font-family:"Italics";
}
.title span{<!-- -->
background: linear-gradient(to right,#ec695c,#61c454) no-repeat right bottom;
background-size: 0px 2px;
transition: background-size 1300ms;
}
.title span:hover{<!-- -->
background-size: 100% 2px;
}
</style>
</head>
<body>
<p class="title">
<span>
Instructor: "Students, are you ready?"<br>
Students: "Always ready, always ready, always ready.<br>
         We were born under the red flag and grew up in the spring breeze. The people have faith, the country has strength, and the nation has hope.<br>
         Everywhere you look is China; the five stars shining are all faith.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp; "
</span>
</p>
</body>
</html>
Effect
11. Adjust the position when the mouse moves in
When the mouseover event fires. Add a property to draw from left.
- When the mouse moves into the content, the underline is drawn from the
leftto therightside - When the mouse moves out of the content, the underline will be erased from
lefttoright
.title span:hover{<!-- -->
background-position-x: left;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Mouse (move in/out) smooth (display/hide) underline</title>
<link rel="stylesheet" href="./index.css">
<style>
.title {<!-- -->
color:#333;
line-height: 2;
font-family:"Italics";
}
.title span{<!-- -->
background: linear-gradient(to right,#ec695c,#61c454) no-repeat right bottom;
background-size: 0px 2px;
transition: background-size 1300ms;
}
.title span:hover{<!-- -->
background-position-x: left;
background-size: 100% 2px;
}
</style>
</head>
<body>
<p class="title">
<span>
Instructor: "Students, are you ready?"<br>
Students: "Always ready, always ready, always ready.<br>
         We were born under the red flag and grew up in the spring breeze. The people have faith, the country has strength, and the nation has hope.<br>
         Everywhere you look is China; the five stars shining are all faith.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
         We would like to use our youth to defend the flourishing China.<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp;<br>
& amp; emsp; "
</span>
</p>
</body>
</html>
Effect
