论坛

标题: hover和圣诞树结合练习，树根有上移效果，但是三角出不来？ [打印本页]

作者: 牛轧糖 时间: 2018-3-26 20:56
标题: hover和圣诞树结合练习，树根有上移效果，但是三角出不来？
hover和圣诞树结合练习，树根和最下面的三角都设置了上移效果，但是树根有效果，三角不能动。
请问老师这是哪里的问题？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.sanjiao1 {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: green;
margin: 0px auto;
}
.sanjiao2 {
width: 0;
height: 0;
border: 150px solid transparent;
border-bottom-color: green;
margin: -180px auto 0px;
}
.sanjiao3 {
width: 0;
height: 0;
border: 200px solid transparent;
border-bottom-color: green;
margin: -230px auto 0px;
}
.sanjiao4 {
width: 80px;
height: 150px;
background: #04331B;
margin: 0px auto;
box-shadow: 0 10px 10px;
transition: 0.3s
}
.sanjiao3：hover {
width: 0;
height: 0;
border: 200px solid transparent;
border-bottom-color: green;
margin: -240px auto;
}
.sanjiao4:hover {
width: 80px;
height: 150px;
background: #04331B;
margin: -10px auto;
box-shadow: 0 10px 15px;
}
</style>
</head>

<body>
<div class="sanjiao1"></div>
<div class="sanjiao2"></div>
<div class="sanjiao3"></div>
<div class="sanjiao4"></div>
</body>
</html>

[attach]124677[/attach][attach]124676[/attach]

作者: lori棒棒糖 时间: 2018-3-29 17:56
sanjiao3:hover 冒号错了，用了中文的冒号不对。
然后sanjiao3少设置了一个 transition: 0.3s；
sanjiao3:hover 也少设置了一个 margin: -240px auto 0px;
注意细节，马虎不得，少一个或错一个符号都不行，多加练习，加油！

作者: 牛轧糖 时间: 2018-3-30 09:46

lori棒棒糖发表于 2018-3-29 17:56
sanjiao3:hover 冒号错了，用了中文的冒号不对。
然后sanjiao3少设置了一个 transition: 0.3s；
sanjiao3:h ...

嗯嗯，谢谢！

欢迎光临论坛 (http://bbs.qinxue.com/)