网站开发之鼠标悬停简单特效实现（四）

        鼠标悬停等操作和特效是网站设计非常重要的一个内容，常见的包括包括：鼠标移动悬停放大、鼠标悬停背景颜色变换、鼠标悬停下拉菜单显示、图片旋转等特效，这篇文章主要是总结HTML和JavaScript中关于鼠标操作的一些特效，希望基础性文章对你有所帮助，如果文章中存在错误或不足之处，还请海涵~

一. 鼠标悬停图片放大效果

        该功能主要是通过超链接实现的，其中hover是表示悬停的效果：

      


	
图片悬停放大图片
 	

 		
    		
    	
	

        其中运行的效果如下所示：

  

        注意：hover表示悬停，图片对应“a:hover img”。

二. 鼠标悬停背景颜色变换

        核心代码如下所示，主要通过鼠标悬停hover设置超链接变换。

    

        
首页
        
关于我
        
相册
        
心情
        
留言
        
文章
   

        运行结果如下所示，鼠标悬停前的效果：

        鼠标移动到背景上面的效果如下所示：

        下面讲解几个重点：
        1、在

布局过程中，需要在CSS中设置"margin:0 auto;"，才能让它居中显示，这段代码的含义是：第一个值就是元素的上下边距0，第二个值就是左右边距。当元素的定义了width属性时，auto还能实现居中的效果。

        2、在CSS中设置h2，需要添加"float: left;"，使其水平显示，不增加该句的效果如下所示：

    

        3、整个DIV布局代码如下所示，h2会向下移动一段距离，这时CSS中通过"margin-top: 4px;"进行微调。

        4、悬停的核心代码如下所示，其中"text-decoration: none;"设置超链接无下划线，然后是悬停在超链接a和字体h2的变换效果。注意冒号(:)和hover之间不能有空格，否则效果消失。

三. 鼠标悬停图片旋转

        下面这段代码是网上找到的，鼠标悬停图片旋转的特效，非常不错，推荐使用。
        旋转参考地址：http://www.w3school.com.cn/cssref/pr_transform.asp
        PS：代码忘记出处了，如果谁知道提醒我，我补加原文地址。

图片旋转

    

        
    

        鼠标悬停的效果如下所示：

     

四. 鼠标悬停下拉菜单显示

        这段代码主要是通过鼠标悬停，显示下菜单的效果，希望对你有所帮助。

 
 
 
 
 
 
 

  

    
首页
      

        
Personal
        
Group
        
Administrator
      
    
    
关于我们
      

        
我们的故事
        
我们的团队
        
我们的青春
      
    
    
我们的服务
      

        
网页设计
        
页面制作
        
程序开发
      
    
   
   
 

        运行效果如下图所示：

        下面这段代码是简单实现鼠标悬停下拉菜单弹出：

 
 
 
 

 
 

  

    
Menu1
menu11menu12
    
Menu2
menu21menu22
    
Menu3
menu31menu32
  

 

        显示效果如下所示：

        希望文章对你有所帮助，这是简单总结了HTML鼠标常见的事件。
        这个网站很多经典效果，但要登录。网址：http://www.16css.com/menu/

        下面是今天晚上发表的一篇QQ说说：
        如果说当老师是我的第一个愿望，花了我18年时间，三个月前终于实现；那么，我的第二个愿望，想有一个自己的个人网站，最近也终于实现了，好开心啊，哈哈哈。
        欢迎大家访问: www.eastmountyxz.com
        大四毕业那年我在去遵义支教的路上写下这样一首诗：

贵州众美路迢迢，

未负劳心此一遭。

搜得破书三四本，

也堪将去教尔曹。

        期待自己的第三个愿望，网站目前只有首页，太忙了还没丰富进去，更多课程内容见我的CSDN。最后当然得感谢沈同学做的首页，哈哈哈，没白教这些学生，真心感谢。

但行好事，莫问前程。

待随满天李桃，再追学友趣事。

        同样，待我已老，也会把自己的每个阶段的人生都丰富到这个网站中去，感觉自己一辈子都与学校学生有关了吧！享受在学校里与同学，学生的生活，发自内心的enjoy。
        日子长着，校园这壶老酒还需我慢慢品尝。
        有学生说我的第三个愿望是：找个妹子谈谈人生和我的第四个愿意，这个不错。
        有学生又说：我是他大学最好的老师
        其实，我真的很荣幸认识自己的每一个学生，所以也会用心对待任何一个并坚持。
        哎，又鸡汤了，当老师后咋变成这样了，fuck~
        (By:Eastmount 2016-11-06 半夜2点 http://blog.csdn.net/eastmount/ )