JS、Html如何动态改变button控件指向的CSS样式

html-css026

JS、Html如何动态改变button控件指向的CSS样式,第1张

准备多组CSS,比如:

.button1{

/*style1*/

}

    .button2{

/*style2*/

}

2. 在用JavaScript修改Button的class,把button1改成button2,就实现了指向的CSS样式改变。

主要思路是利用hover来进行功能实现,transition-duration:来实现过度动画;

css这样实现

html如下

.download-block{

width:90%

height:100px

background:#0b0e32

/*margin:  100px  auto 0*/

    margin:0 auto

position:absolute

left:0

right:0

transition-duration:2s

opacity:0.7

}

.download-block1{

background:transparent

height:100px

overflow:hidden

position:relative

left:0

top:-100px

right:0

padding-top:100px

transition-duration:2s

opacity:0.7

cursor:pointer

}

.download-block1:hover{

padding-top:0

transition-duration:2s

opacity:0.7

}