Home >Web Front-end >CSS Tutorial >Examples of usage of hover pseudo-class in CSS
Examples of usage of hover pseudo-class in CSS
- 黄舟Original
- 2017-10-21 10:37:341917browse
: 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 an element and the element itself changes to a new style through:hover
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, written as .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>The above is the detailed content of Examples of usage of hover pseudo-class in 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