[外门弟子]JS-8|2019年03月17日的日报-技能树.IT修真院

发表于： 2019-03-17 20:39:56

1 809

Day 39 task8-7

今天完成的事情

1.完成task8.9并提交

2.开始task10

遇到的问题

1. 【solved】思考怎样实现页面3这个hover效果，想用绝对定位给它写好，覆盖在原栅格内，然后给他设置隐藏，鼠标hover的时候显示；透明度需要设置使用background : rbga。

.box{
position: relative;    设置父元素定位
padding-top: 1vw;
margin-bottom: 2.5vw;
margin-right:  1.4vw;
border-radius: 4px;
background: #ffffff;
box-shadow: 0 0 5px #dddbdb;
border: none;
}
.hover{
display: none;         设置hover正常态不可见
position: absolute;    定位hover
top: 0;
bottom: 0;
padding-top: 4.53vw;
color: #ffffff;
border-radius: 4px;
background-color: rgba(61, 61, 61, 0.8);        设置hover透明度
z-index: 10;                                    设置hover覆盖在父元素之上
}
.box:hover .hover{
display: block;       设置父元素之上鼠标滑动时hover可见
animation: sport 1s;  该动画命名为 sport 动画持续时间为1s
}
@keyframes sport {    动画sport的运动方式
from  {transform: translateY(100%);opacity: 0;} 定义初始位置  
to {transform: translateY(0px);opacity: 1}     （页面就像直角坐标第四象限 从下到上 > 自百分百高度到原点） 
}

收获

1.hover控制对象的介绍

标签或元素类名：hover加空格或“>”（例：a:hover .b 或a：hover> .b）控制子级的hover效果。

标签或元素类名：hover+ 同级标签或同级元素类名（例a：hover+ .b)控制同级元素的hover效果。

标签或元素类名：hover~ .同级标签或同级元素类名（例a：hover~ .c)控制就近元素hover效果。

例

使用a 控制其他块的样式：

使用a控制a的子元素 b：

   .a:hover .b {            background-color:blue;        }

使用a控制a的兄弟元素 c(同级元素)：

   .a:hover + .c {            color:red;        }

使用a控制a的就近元素d：

   .a:hover ~ .d {            color:pink;        }

明天计划学习

开始任务10

注：【unsolved】截日报发出前未解决的问题

【solved】已解决现象但并未从根本上解决问题

【solved】已解决

返回列表

【任务8】 [外门弟子]JS-8 | 2019年03月17日 的日报 中品

评论

分享到

【任务8】 [外门弟子]JS-8 | 2019年03月17日的日报中品