CSS3实现鼠标移入移出时改变样式的效果
1，使用伪类实现样式切换
伪类是CSS2.1时出现的新特性，让许多原本需要JavaScript才能做出来的效果使用CSS就能实现。
比如实现下面的鼠标悬停效果，只要为:hover伪类应用一组新样式即可。当访客鼠标移动到按钮上面时，浏览器会自动为按钮应用这新样式。
<style>
.slickButton {
color: white;
font-weight: bold;
padding: 10px;
border: solid 1px black;
background: lightgreen;
cursor: pointer;
}
.slickButton:hover {
color: black;
background: yellow;
}
<button class="slickButton">hangge.com</button>
2，使用CSS3的过渡功能实现颜色过渡
直接使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡（transition）功能，就可以从一组样式平滑的切换到另一组样式。
（1）背景色过渡变化
下面鼠标移入后，按钮背景色会慢慢地变成黄色。鼠标离开，过渡效果又会发生，颜色恢复到初始状态。
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy2193')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy2193>
<style>
.slickButton {
color: white;
font-weight: bold;
padding: 10px;
border: solid 1px black;
background: lightgreen;
cursor: pointer;
transition: background 0.5s;
-webkit-transition: background 0.5s;
}
.slickButton:hover {
color: black;
background: yellow;
}
</style>
<button class="slickButton">hangge.com</button>
（2）背景色，文字都需要过渡效果
上面样例看到虽然背景色实现了过渡，文字颜色还是直接改变的。要实现多个样式的过渡，只需使用逗号作为分隔符，同时制定多个样式属性即可。
<style>
.slickButton {
color: white;
font-weight: bold;
padding: 10px;
border: solid 1px black;
background: lightgreen;
cursor: pointer;
transition: background 0.5s, color 0.5s;
-webkit-transition: background 0.5s, color 0.5s;
}
.slickButton:hover {
color: black;
background: yellow;
}
</style>
<button class="slickButton">hangge.com</button>
（3）过渡所有样式
如果想要过渡所有的样式，并且希望所有过渡都同步完成，可以在指定属性名的地方填 all。
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy7131')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy7131>
transition: all 0.5s;
-webkit-transition: all 0.5s;
3，更多的过渡效果
（1）淡入淡出
通过修改 opacity 属性改变透明度，从而实现图像的淡入淡出。
<style>
.slickButton2 {
color: white;
font-weight: bold;
padding: 10px;
border: solid 1px black;
background: lightgreen;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
}
.slickButton2:hover {
opacity: 1;
}
<button class="slickButton2">hangge.com</button>
（2）阴影（投影）效果
使用 box-shadow 属性可以为任何盒子元素添加阴影，从而制作出漂亮的悬停效果。
<style>
.slickButton3 {
color: white;
font-weight: bold;
padding: 10px;
border: solid 1px black;
background: lightgreen;
cursor: pointer;
transition: box-shadow 0.5s;
-webkit-transition: box-shadow 0.5s;
}
.slickButton3:hover {
box-shadow:5px 5px 10px gray;
}
</style>
<button class="slickButton3">hangge.com</button>
（3）发光效果
同样利用 box-shadow 属性可以实现发光效果，只不过把阴影偏移量设为0。
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy1686')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy1686>
<style>
.slickButton4 {
color: white;
font-weight: bold;
padding: 10px;
border: solid 1px black;
background: lightgreen;
cursor: pointer;
transition: box-shadow 0.5s;
-webkit-transition: box-shadow 0.5s;
}
.slickButton4:hover {
box-shadow:0px 0px 20px orange;
}
</style>
<button class="slickButton4">hangge.com</button>
4，下面样式不值得使用过渡效果
对于内边距（padding）、外边距（margin）和字体大小（font-size）。如果应用由于浏览器要重新计算布局大小或文本提示，这样过渡会消耗更多电量，同时可能导致响应迟钝和卡壳。
如果想要移动、放大、缩小元素，那么最好使用变形技术。
您可能感兴趣的文章：
7款吸引人眼球的jQuery/CSS3特效实例分享
CSS3实现鼠标移入移出时改变样式的效果
js 鼠标移入/移出改变样式效果代码
使用jquery hover事件实现表格的隔行换色功能示例
Jquery写一个鼠标拖动效果实现原理与代码
纯CSS3图标旋转效果代码
鼠标移出事件的案例以及详解
JQuery之拖拽插件实现代码
jQuery 文本框模拟下拉列表效果
利用jQuary实现文字浮动提示效果示例代码