.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、字体变化：
<!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>
em:hover{ display: inline-block; transform: scale(2); }
span:hover{ display: inline-block; transform: rotate(360deg); transition: 1s; }
</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>
结果如下：
悬浮这里出现背景色
悬浮这里出现边框
为不影响边框显示后位置的变化，所以先将边框设置为透明色，如果想要实现动态的效果，可以在不悬浮时不设边框，这样悬浮时文字就会有一个动态的过程。
除此之外，想要实现hover更加丰富的功能，要灵活应用属性设置，并且结合功能进行设置，比如对于链接的文本采用hover反色，改变字体亮度等带给人聚焦点亮的效果；对于关闭功能，设置等这些功能性按钮图标，可以采用hover更换背景图片，或者旋转、放大来引起人们的注意，并为简洁的页面增加活泼的效果。