开发工具与关键技术：DW与css
作者：陈锦通
撰写时间：2019年2月22日星期五
先来看看代码吧。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.div1{
width: 200px;
height: 200px;
background: #7118E0;
}
.div1:hover{
background: #BF5F61;
}
.div1:hover .div2{
width: 100px;
height: 100px;
background: #14A640;
}
.div1:hover .div2:hover{
background: #808309;
}
.div2:hover .div3{
width: 50px;
height: 50px;
background: #F40F9D;
}
.div2:hover .div3:hover{
background: #D5D415;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3">
</div>
</div>
</div>
</body>
</html>
解释代码的意思：就是在一个div1里面加一个div2，里面那个div2又加一个div3。
样式都是伪类套伪类。我们看看效果把。如下：
开始的效果是
然后把移入鼠标的效果是
在把鼠标放在绿色上面
再把鼠标放在粉红色上面
453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
