table of Contents
Preface
There are many ways to use hover options
Unified code:
<html>
<body>
<style>
#a:hover {
color : #FFFF00;}
#a:hover > #b:first-child{
color : #FF0000;}
#a:hover > #b{
color : #FF00FF;}
#a:hover + #c{
color : #00FF00;}
#a:hover + #c > #b{
color : #0000FF;}
</style>
<div id='a'>元素1
<div id='b'>元素2</div>
<div id='b'>元素2</div>
</div>
<div id='c'>元素3
<div id='b'>元素2</div>
</div>
</body>
</html>
1. Change the current element
#a:hover {
color : #FFFF00;}
2. When there are multiple child elements, only one of them is changed.
#a:hover > #b:first-child{
color : #FF0000;}
3. When there are multiple child elements, change all of them
#a:hover > #b{
color : #FF00FF;}
4. When dealing with indirect elements
#a:hover + #c{
color : #00FF00;}
Note: When processing non-linear elements, only downward non-linear elements can be processed, and upward non-linear elements are not controlled
5. When dealing with sub-elements of non-direct elements
#a:hover + #c > #b{
color : #0000FF;}
Note: When processing non-linear elements, only downward non-linear elements can be processed, and upward non-linear elements are not controlled