Css中类、id应用hover动作详解

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

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

 

比如：

CSS Code复制内容到剪贴板

.Mylcass{padding:5px 5px; background:#f60}
.Myclss:hover{ background:#000}

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复制内容到剪贴板

<div class="myclassname">myclassname</div>

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复制内容到剪贴板

<div class="myclassname">myclassname</div>

 

Ps:如果需要鼠标小手形状，就加上这句代码：cursor:pointer
本篇文章目的只是抛砖引玉，hover用法不仅仅局限于此，发挥你的想象力、创造力，还可以做出更多的效果。