<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css:hover state changes the use of another element style</ title>
<style>
.box { width: 150px; height: 150px; background-color: #069; line-height: 150px; text-align: center; margin: 20px 0; color: #FFF; }
.change {
font-size: 20px;
color: #0cf;
}
/* Scenario 1: Two are brother elements*/
.box:hover+.change {
color: red;
}
/* Scenario 2: Two are parent-child elements*/
.box:hover .change {
color: red;
}
/* Scenario 2: Two are sibling elements, and the child element of one sibling element is changed*/
.box:hover+#c>.change {
color: red;
}
</style>
</head>
<body>
<!-- Scenario 1: Two are sibling elements -->
<div class="box"></div>
<div class="change">Sibling elements</div>
<!-- Scenario two : Two are parent-child elements -->
<div class="box">
<span class="change">child elements of parent element</span>
</div>
<!-- Scenario 2: Two are sibling elements , The change is the child element of a sibling element -->
<div class="box"></div>
<div id='c'>
<div class="change"> the child element of the sibling element</div>
</div>
</body>
</html>