利用JQuery给div按钮加上统一的动态效果

我们有时候要在网页中做一些好看的按钮，这个时候就不能利用<input type="button" ...>，
我们要利用div来做。
但是由于，div本身不是按钮，如果鼠标放上去的时候，不会变成手形，在以前，我们会给每个div
加上 onMouseover="this.style.cursor='hand'"
但是这样做太麻烦了，因为按钮可能很多。

如果利用JQuery,我们利用简单的JS语句就能做到。
这样做的好处是：我们可以做到代码的封装，把JS代码保存在文件中，然后每个页面中引入这个
js文件即可。

JS代码如下：

$(document).ready( function ()  {
    //Enable hover effect on the buttons.
    $('.button').hover(
        function() {
            $(this).addClass('hover');
        }, 
        function() {
            $(this).removeClass('hover');
        }
    );
} );

CSS代码如下：

.button  {
  width :  80px ;
  text-align :  center ;
  margin :  10px ;
  padding :  10px ;
  background-color :  #fff ;
  border-top :  3px solid #888 ;
  border-left :  3px solid #888 ;
  border-bottom :  3px solid #444 ;
  border-right :  3px solid #444 ;
}

.hover  {
  cursor :  pointer ;
  background-color :  #afa ;
}

转载于:https://www.cnblogs.com/davidgu/archive/2009/07/30/1535076.html