HTML鼠标悬浮增加亮度,利用css实现hover动态效果

.font em:hover { font-size: 2em }

.font strong:hover { font-weight: normal }

.font span:hover { color: blue }

.transform * { }

.transform em:hover { }

.transform span:hover { }

.background { width: 200px; height: 50px }

.background:hover { background: yellowgreen }

.border { width: 200px; height: 50px; border: 2px solid transparent }

.border:hover { border: 2px solid black }

对文字hover展现出特殊效果，可以采用调整元素css属性来完成，虽然只能实现一些简单的动作，精心组合之下却能够达到令人满意的结果。

1、字体变化：

Test

em:hover{ font-size: 2em; }

strong:hover{ font-weight: normal; }

span:hover{ color: blue; }

悬浮变大

悬浮变细

悬浮变颜色

结果如下：

悬浮变大

悬浮变细

悬浮变颜色

2、缩放和旋转：

Title

em:hover{ display: inline-block; transform: scale(2); }

span:hover{ display: inl