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