CSS to achieve the color changing effect of the whole line when the mouse is on it

Time:2020-8-1

Abstract:

The following describes how to share the color changing method of the whole line when the mouse is placed on the specified line in CSS, as follows:

Realization idea:

Use: hover pseudo class to change the background color when the mouse points to it, as shown in the following example:

For example:

In the following div, when the mouse is on, the background color changes accordingly.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
< title > cat tutorial( www.maomao365.com )</title>
<style type="text/css">
div{
  overflow:hidden;
  white-space:nowrap;
  height:30px;
  width:250px; 
  background-color:white;
  color:black;
}
.divTest:hover{
  background-color:blue;
  color:white;
}
</style>
</head>
<body>
< div class = "divtest" > when div mouse moves up, the background color changes < / div >
</body>
</html>

summary

The above is a small series of CSS introduced to you to achieve the color change effect of the whole line when the mouse is placed on it. I hope it can help you!