利用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;
}