Home >Web Front-end >CSS Tutorial >css: How to use hover pseudo-class
css: How to use hover pseudo-class
- 一个新手Original
- 2017-10-20 11:05:593649browse
: The use of hover, that is, the style setting made when the mouse pointer moves into the element
Example 1
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>demo01</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
width: 300px;
margin-top: 10px;
background: #ff0000;
}
ul li:hover{
background: #000000;
}
</style></head><body>
<ul>
<li></li>
<li></li>
<li></li>
</ul></body></html>The above situation exists when the mouse pointer moves into the element, through: hover Make the element itself change a new style
Example 2
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>demo01</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 300px;
height: 300px;
border: 1px solid #ff9f5a;
}
.content{
width: 100px;
height: 100px;
background: #27e7ff;
}
.container:hover .content{
background: #000000;
}
</style></head><body>
<p class="container">
<p class="content"></p>
</p></body></html>In the above example, when there is a parent-child relationship, you can change the style of the child through the parent's :hover. This is how to write For .container:hover .content, there is a space after hover; but , child: hover cannot change the style of the parent
Example 3
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>demo01</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 300px;
height: 300px;
border: 1px solid #ff9f5a;
}
.content{
width: 100px;
height: 100px;
background: #27e7ff;
}
.container:hover +.content{
background: #000000;
}
</style></head><body>
<p class="container"></p>
<p class="content"></p></body></html> In the above example, when the two elements are not a parent-child relationship but a sibling relationship, then .container:hover .content is invalid. You need to pass the "+" sign, that is .container:hover +.content can display the effect; but please pay attention to the order of the two elements~
The above is the detailed content of css: How to use hover pseudo-class. For more information, please follow other related articles on the PHP Chinese website!