css3 .text:nth-child() :hover ~ piclists 为什么显示不出来，只显示一张背景图片

一页风华 2019-04-12 01:34:40

css3 .text:nth-child() :hover ~ piclists 为什么显示不出来，只显示一张背景图片

代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>

<style>

body{
margin:0;
}

.tab{
width: 900px;
height: 400px;
margin: 50px auto 0 auto;
background-color: blue;
font-size: 0;
}
.text{
display: inline-block;
width: 180px;
height: 40px;
background-color: #e3e2e2;
text-align:center;
line-height:40px;
font-size:14px;
}
.piclists{
width: 900px;
height: 360px;
background-color:#cc66ff;
background-image:url('IMG_20190405_193239.jpg');
background-repeat: no-repeat;
background-size: 900px 360px;
transition: 1s;
}
.text:hover{
background-color: #f7f6f6;
color: #996666;
}
.text:nth-child(2) :hover ~ .piclists{
background-image: url('IMG_MIRROR_20190124_233631.jpg');
}
.text:nth-child(3) :hover ~ .piclists{
background-image: url('2451581202C5ECE060F4653B78DFC94FF875A89E74.jpg');
}
.text:nth-child(4) :hover ~ .piclists{
background-image: url('706fe5ea7323c490.jpg');
}
.text:nth-child(5) :hover ~ .piclists{
background-image: url('3c811914f9e5bb80.jpg');
}
</style>
</head>
<body>
<div class="tab">
<span class="text">小组成员</span>
<span class="text">11</span>
<span class="text">22</span>
<span class="text">33</span>
<span class="text">44</span>
<div class="piclists"></div>
</div>

<center><h1><a href="wangzhanshouye.html">返回</a></h1></center>

</body>
</html>

...全文