css:hover狀態改變另一個元素樣式的使用
阿新 • • 發佈：2019-02-08
情景1：
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
body{
margin: 0;
padding: 0;
}
.container .ul li{
width 分析：當hover的元素和需要改變樣式的元素是父子關係的時候，可以這麼寫（.container:hover ul.ul>li:nth-child(2)）直接在hover後面加上空格，加上需要改變你的元素
情景2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
body{
margin: 0;
padding: 0;
}
.wrap{
width: 100px;
height: 100px;
background: #6c0;
}
.container .ul li{
width: 100px;
height: 20px;
background: #f00;
margin-bottom: 10px;
list-style: none;
}
.container{
border: 1px solid #000;
}
.container:hover ul.ul>li:nth-child(2){
background: #000;
}
.contianer:hover div.wrap{
background: #000;
}
</style>
</head>
<body>
<div class="container">
<ul class="ul">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="wrap"></div>
</body>
</html>分析：此時是hover container容器，改變wrap框的背景顏色，但發現container和wrap不是父子關係而是兄弟關係，這時候這樣寫（.contianer:hover div.wrap{background: #000;}）不起效果。應該的寫法是（.container:hover +.wrap{background:#f00;}）
