对文字hover展现出特殊效果，可以采用调整元素css属性来完成，虽然只能实现一些简单的动作，精心组合之下却能够达到令人满意的结果。
1、字体变化：
<!DOCTYPE html><html lang="en"> ???<head> ???????<meta charset="UTF-8"> ???????<title>Test</title> ???????<style> ???????????em:hover{ ?font-size: 2em; ?} ???????????strong:hover{ ?font-weight: normal; ?} ???????????span:hover{ ??color: blue; } ???????</style> ???</head> ???<body> ???????<em>悬浮变大</em><br> ???????<strong>悬浮变细</strong><br> ???????<span>悬浮变颜色</span> ???</body></html>结果如下：
悬浮变大
???????悬浮变细
???????悬浮变颜色
2、缩放和旋转：
<!DOCTYPE html><html lang="en"> ???<head> ???????<meta charset="UTF-8"> ???????<title>Title</title> ???????<style> ???????????*{ ?transition: all linear 2s;} ???????????em:hover{ display: inline-block; transform: scale(2); ?} ???????????span:hover{ display: inline-block; transform: rotate(360deg); ??} ???????</style> ???</head> ???<body> ???????<span>悬浮这里旋转</span> ???????<em>悬浮这里放大</em> ???</body></html>结果如下：
悬浮这里旋转 悬浮这里放大
可以看大，这里的放大并不会向上面一样影响行高，更多的是一种投影效果。
3、改变背景和边框：
<!DOCTYPE html><html lang="en"> ???<head> ???????<meta charset="UTF-8"> ???????<title>Title</title> ???????<style> ???????????.background{ ?width: 200px; height: 50px; ?} ???????????.background:hover{ ?background: yellowgreen; } ???????????.border{ ?width: 200px; height: 50px; border: 2px solid transparent; ?} ???????????.border:hover{ ?border: 2px solid black;} ???????</style> ???</head> ???<body> ???<p class="background"> ???????悬浮这里出现背景色 ???</p> ???<p class="border"> ???????悬浮这里出现边框 ???</p> ???</body></html>结果如下：
悬浮这里出现背景色
悬浮这里出现边框
为不影响边框显示后位置的变化，所以先将边框设置为透明色，如果想要实现动态的效果，可以在不悬浮时不设边框，这样悬浮时文字就会有一个动态的过程。
利用css实现hover动态效果
原文地址：http://www.cnblogs.com/zzmiaow/p/7669119.html