嘿嘿，你们知道吗？CSS 有个神奇的功能叫做“悬停效果”。 就是当鼠标把手指放在某个网页元素上的时候，这个元素的样子会发生变化。听起来挺酷吧？其实很简单，太魔幻了。。

什么是 CSS `:hover` ?

怎么用 `:hover` 来改变颜色？

官宣。 想让你的按钮或者链接等等变成其他颜色呢？没问题！ 你只需要在对应的元素的 CSS 代码里加上 `:hover` ，然后指定新的颜色属性就可以了。

这是个卡片。当鼠标移到它上面... 点击我 是不是很简单？ 大体上就这样了，呃...。

进阶技巧：不仅仅是颜色

除了改变颜色之外你还可以用 `:hover` 来改变很多其他的样式属性呢！比如背景色、字体大小、边框等等。

` test {background:#FFF; color:#000;} .test :hover {background:#000; color:#FFF;} `

过渡动画

"过渡动画"这个东西有点难懂。就是让颜色或者其他样式变化得更平滑一点儿。这样用户体验会更好。你可以给 `transition` 添加一些参数来控制变化的快慢。

` transition: background-color 0.3s ease; `

可访问性

如果你的网站面向所有人，一定要注意可访问性问题。比如确保 hover 效果的颜色对比度足够大，这样即使鼠标没有移动到元素上也能清楚地看到状态的变化，别犹豫...。

         & nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;

一下

---