使用Jquery,CSS3实现像GooglePlus那样的圆圈效果(2)

  46:     background: -moz-linear-gradient(top, #ececec 0%, #d8d8d8 100%);
  47:      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ececec), color-stop(100%,#d8d8d8));
  48:      background: -webkit-linear-gradient(top, #ececec 0%,#d8d8d8 100%);
  49:      background: -o-linear-gradient(top, #ececec 0%,#d8d8d8 100%);
  50:      background: -ms-linear-gradient(top, #ececec 0%,#d8d8d8 100%);
  51:  }
  52:  
  53:  div.middle.hover {
  54:      -moz-transform: scale(1.4);
  55:      -webkit-transform: scale(1.4);
  56:      transform: scale(1.4);
  57:  }
  58:  div.inner
  59:  {
  60:      margin:14px;
  61:  
  62:      background:#3f96d1;
  63:      width:96px;
  64:      height:96px;
  65:  
  66:      font-size:11px;
  67:      color:#FFF;
  68:      line-height:96px;
  69:      text-align:center;
  70:      font-family:Arial;
  71:  
  72:      -webkit-border-radius: 48px;
  73:      -moz-border-radius: 48px;
  74:      border-radius: 48px;
  75:   
  76:      -webkit-box-shadow: inset 0px 1px 1px 0px #575757;
  77:      -moz-box-shadow: inset 0px 1px 1px 0px #575757;
  78:      box-shadow: inset 0px 1px 1px 0px #575757;
  79:  
  80:      border-bottom:1px solid #FFF;
  81:  
  82:      position:absolute;
  83:      z-index:1000;
  84:  
  85:  }
  86:  </style>
引入JQuery:
   1:  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript">
   2:  </script>
   3:  
   4:  <script language="javascript" type="text/javascript">
   5:  $(function() {
   6:      $('div.circle').mouseover(function() {
   7:          $('div.outer').addClass('hover');