我们有时候要在网页中做一些好看的按钮，这个时候就不能利用<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

;

}