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 : 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;
}
</style>
</head>
<body>
<div class="container">
<ul class="ul">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>`
分析:當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;})