最近手头有个页面，感觉太静，就想着加点动态效果，让它稍微“活”一点。也不是要做啥特别花哨的东西，就是用户点一点、或者鼠标划过的时候，能给点反应，体验上会好一些。
一开始也没啥头绪，就琢磨着最常见的那些效果。比如：
- 鼠标放上去变个颜色或者稍微放大一点。
- 点个按钮弹个小提示或者展开点内容。
- 图片切换，搞个简单的轮播啥的。
感觉这些都挺实用，也不至于太复杂。我就先从最简单的悬停效果搞起。
搞定悬停效果
就是想实现鼠标移动到一个区域上，那个区域的背景色能慢慢变一下，鼠标移走再变回来。听起来简单，实际做起来还是得一步步来。
第一步，找到目标。 我先得告诉浏览器，我要操作的是页面上的哪个块块。这就要用到JS来选中它。我给那个区域加个ID，比如叫`myBox`，然后在JS里就用个方法把它“抓”过来。
第二步，监听动作。 抓到这个块块之后，就得让浏览器盯着它。我需要监听两个动作：鼠标“进来”和鼠标“出去”。JS里有现成的方法干这个事儿，挺方便。
第三步，执行变化。 监听到鼠标“进来”，就执行我写好的一个函数，这个函数就干一件事：把这个块块的背景色改成我想要的颜色，比如从灰色变成淡蓝色。同样，监听到鼠标“出去”，再执行另一个函数，把它变回原来的灰色。
一开始直接改颜色，感觉有点生硬，一闪就变。后来想起来CSS里有个`transition`属性，给加上这个之后，颜色变化就有个过渡，看起来就平滑多，舒服！
搞定这个之后，感觉还行，没想象中那么难。就是有时候写代码手快，漏个分号或者括号没配对，浏览器控制台就报错，得回头找半天。这种小错误真是挺烦人的。
尝试搞个简单的显示隐藏
悬停搞定，我就想再试试点击按钮显示或隐藏一块内容。这个也挺常见的，比如“查看更多”这种。
思路跟上面差不多：
- 抓按钮和内容块。 把触发的按钮和要显示隐藏的内容块都用JS抓到。
- 给按钮加监听。 监听按钮的“点击”动作。
- 写切换逻辑。 点击之后，就判断一下那个内容块当前是显示还是隐藏状态。如果是隐藏的，就让它显示出来；如果是显示的，就让它隐藏掉。这个判断写起来也不复杂，改一下它的`display`样式就行，从`none`变成`block`，或者反过来。
这个做起来也还算顺利。点一下按钮，内容出来，再点一下，内容收回去。效果达到。
这回实践就是对JS操作页面元素加深点理解。虽然都是些基础的效果，但一步步调通之后，看着页面真的能根据我的操作动起来，还是挺有成就感的。果然，页面加点交互，感觉立马就不一样。