前言

今天来讲 hover 当我们触碰到某个元素时，会产生不同的效果

hover基本语法

要使hover有作用必须在hover前面加上 ':' --> :hover
除了原先设定写好的CSS之外，
再写另一个CSS，并将:hover写在名称後面 --> .aaa:hover{}
假设今天当我们将滑鼠游标碰到名为 aaa的class 的 超连结 时，
要变换他的背景颜色，如下
原先的背景色

.aaa{
    background: #aaa;
}

透过hover後要变更的背景色

.aaa:hover{
    background: #000;
}

当然不只是颜色可以改变，其他像是字体、边框、长宽等等都可以透过hover滑到时改变

transition

那当我们碰到时，他直接改变颜色或是大小是不是有点奇怪?
这时候就可以使用我们的transition来让我们的动画更生动

transistion : 属性 转换时间 延迟执行时间 速度 ;

改变前

.aaa{
    background: #aaa;
    transition: all 1s 0s ;
}

改变後

.aaa:hover{
    background: #000;
}

这样我们的动画就会不死板并且更有延续感啦

那最後要再加点东西让我们的程序码可以看起来较完整一点

CSS:

改变前

.aaa{
    background: #aaa;
    color: #fff;
    font-size: 30px;
    text-decoration: none;
    transition: all 1s 0s ;
}

改变後

.aaa:hover{
    background: #000;
}

HTML:

直接写一个超连结来测试我们的hover效果就好

<a href="#" class="bts">OMG</a>

今天先这样，那我们铁人赛Day15见罗!!