我们有时候要在网页中做一些好看的按钮,这个时候就不能利用<input type="button" ...>,
我们要利用div来做。
但是由于,div本身不是按钮,如果鼠标放上去的时候,不会变成手形,在以前,我们会给每个div
加上 onMouseover="this.style.cursor='hand'"
但是这样做太麻烦了,因为按钮可能很多。
如果利用JQuery,我们利用简单的JS语句就能做到。
这样做的好处是:我们可以做到代码的封装,把JS代码保存在文件中,然后每个页面中引入这个
js文件即可。
JS代码如下:
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');
}
);
} );
//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 ;
}