Css中类、id应用hover动作详解_HTML5中文网 - 我们以促进HTML5在中国的普及而努力--HTML5中文学习网

Hover对于我们太熟悉了，其早期只定义于文本超链接鼠标移动上方样式。

慢慢的IE7、IE8.0/、IE9.0等火狐、谷歌浏览器面试，hover也渐渐被业界应用于更多领域。

比如：

CSS Code复制内容到剪贴板

Myclass当然可以定义其他样式，比如宽度、高度、颜色，如果想得到更好的效果，可以融入css3的新属性。

Hover这里我们叫它动作，这种动作在所有网页是最基本也是最多的鼠标执行动作。如果不考虑IE6.0，我们完全可以舍弃js，用它来实现各种效果。当然了，css3也是必不可少的。

下面做了俩个简单的例子:

Css2中的myclass:hover

Css部分：

CSS Code复制内容到剪贴板

.myclassname{ width:500px; height:200px; background:#000; text-align:center;line-height:200px; color:#ffffff}
.myclassname:hover{ height:400px; background:#f60; line-height:400px; color:#ffffff}

Html部分：

XML/HTML Code复制内容到剪贴板

Css3中的myclass:hover

这个例子我们要使用css3中transportation属性，值钱没有认识这个属性的请移驾到此文章先了解下它的用法：css3动画实例之transition

亦可以去本站制作的手册去了解更详细的用法

CSS Code复制内容到剪贴板

.myclassname{width:500px; height:200px; background:#000; text-align:center;line-height:200px; color:#ffffff;cursor:pointer;-moz-transition:.5sease-in;-webkit-transition:.5s;ease-in;-o-transition:.5s ease-in;transition:.5s ease-in;}
.myclassname:hover{ height:400px; background:#f60; line-height:400px; color:#ffffff}

Html部分：

XML/HTML Code复制内容到剪贴板

Ps:如果需要鼠标小手形状，就加上这句代码：cursor:pointer

本篇文章目的只是抛砖引玉，hover用法不仅仅局限于此，发挥你的想象力、创造力，还可以做出更多的效果。