让按钮来个酷动态！ 操纵DOM事件：CSS 篇 (一)

除了网页依照设计安排自己动之外，最有趣的部份其实是与使用者的互动，滑鼠移动、点击、键盘按键、卷动、甚至是表单送出等，都是可以监控的事件。操控事件最简单的方式就是直接使用CSS的虚拟类别（pseudo-class），像是滑鼠移到网页元件的hover，和滑鼠或触控点击的active，可以说是最便於使用的方式。

:hover 按钮的灵魂效果
通常来说，为了让人能够一眼便认出画面中的按钮，按钮的设计上会以「好像可以点」的视觉图像制作，像是使用边框、大面积色块、增加图示甚至是增加阴影效果，都能让按钮看起来就像是个按钮。
当大家知道那是颗按钮时，就会将滑鼠移到上方然後点击，在这个一连串可预期的互动中，就是设计师暗藏小互动的时候了！除了可以产生点即暗示意味，也能够展现网站的风格，很多时候，这些小动态甚至可以说是整个网站的灵魂，不论是底色转变为外框、弹跳效果、按钮放大、字体换色等，都是可以尝试的方式。

:hover使用方式很简单，就是在指定的网页元件的名字旁，加上:hover使用，接下来下方定义的就会是hover事件触发时，所呈现的CSS内容，若想改用:active来修改按钮被点击後的css状态，也可以使用一样的方式。

.my-div {
    text-align: center;
    font-size: 24px;
    line-height: 55px;
    height: 55px;
    width: 130px;
    color: white;
    border: solid 2px #333;
    background:#333;
    box-shadow: 0px 0px 10px #777;
}
.my-div:hover {
    border: solid 2px #333;
    color: #333;
    background:white;
}

不过:active指的是被点的当下状态，除非用户一直按着不放，不然是部会一直留在画面上，以这样的直观的操作是无法达成点按後改变状态，像是Toggle的效果，会需要利用input或其他具有状态的html标签，搭配:before、:after等伪元素可以实作。

如何使用CSS实作toggle可以参考这份教学：
https://www.w3schools.com/howto/howto_css_switch.asp

前往後续文章
CSS 第二篇：https://ithelp.ithome.com.tw/articles/10269891