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

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

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

 

比如：

CSS Code 复制内容到剪贴板

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

Myclass当然可以定义其他样式，比如宽度、高度、颜色，如果想得到更好的效果，可以融入css3的新属性。
Hover这里我们叫它动作，这种动作在所有网页是最基本也是最多的鼠标执行动作。如果不考虑IE6.0，我们完全可以舍弃js，用它来实现各种效果。当然了，css3也是必不可少的。

 

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

Css2中的myclass:hover

 

Css部分：

CSS Code 复制内容到剪贴板

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

Html部分：

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

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

Css3中的myclass:hover

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

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

CSS Code 复制内容到剪贴板

1. .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;} 
2.  
3. .myclassname:hover{ height:400px; background:#f60; line-height:400px; color:#ffffff} 

Html部分：

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

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

 

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

转载于:https://www.cnblogs.com/xiao-wei-wei/archive/2012/08/18/2645705.html