今天完成的事情：

任务七的投票页面

学会了hover效果

.lake{
    margin: 50px 40px 50px 40px;
    display: flex;
    justify-content: space-around;
}
.figure:hover +.cold{
    opacity: 1;
}
.figure {
    width: 18vw;
    height: 18vw;
    background: #f5c97b;
    border: 1vw solid #fff;
}
.block{
    text-align: center;
    line-height: 13.5vw;
}
.number{
    background: #83b09a;
    text-align: center;
    line-height: 5vw;
}
.cold{
    width: 19vw;
    height: 6vw;
    background-image: url(../img/7.2.3.png);
    background-repeat: no-repeat;
    background-size: 19vw;
    margin-top: 2vw;
    opacity: 0;
}
.tool{
    height: 30px;
    width: 30px;
    background-position: -40px 0;
}
.mirror{
    height: 30px;
    width: 30px;
    background-position: -80px 0;
}

明天计划的事情：任务七的最后一个页面，已经完成任务七的所有任务

遇到的问题：说实话任务是越做越难，所消耗的时间也越来越长，不过每天都有问题每天也在解决问题，比如今天卡在了hover效果上面了，自己搜百度搜了很久，找的要么看不懂要么套用不上，问题搜了一遍又一遍，讲真的hover这个单词我都会背会默写了，后来实在扛不住了，就去问了师兄，经过师兄的解答指点，总算是明白怎么回事了。

收获：今天学会了用hover效果，虽然还不是很精，但是已经大致的明白写法了，写法有三种：

1、可用hover效果使元素改变自身的样式

ul li{width:300px;margin-top:10px；background:#fff}

ul li:hover{background:#000}

2、如果是父子级元素时，可以通过父级hover来改变子级元素的样式，写法为.父级元素：hover .子级元素，hover后面有空格。但是子级元素无法改变父级样式。

3、如果不是父子元素，是相邻的兄弟元素，则通过：父级元素：hover .子级元素，这样的样式是无效的，则需要通过+号，即上一个元素hover +.下一个元素才能显示效果，还要注意两个元素的先后位置，另外这个hover后面一样有空格的。

任务：css-7

禅道主页：http://task.jnshu.com/zentao/project-task-858.html