0
버튼 위로 마우스를 가져 가면 배경색과 텍스트 색상이 변경되지만 CSS3 전환 효과로 변경하려고합니다. 텍스트 색상 만 변경되며 배경색은 변경되지 않습니다.css3 (전환) 작동하지 않습니다.
.input-submit
{
margin: 12px 0 2px
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to(rgb(224, 224, 224)));
background-image: -webkit-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
background-image: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
background-image: -o-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
background-image: linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
border: 0;
font-weight: normal;
color: #333;
text-shadow: 0 1px 0 white;
border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px;
width: 60px;
border-image: initial;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.input-submit:hover
{
cursor:pointer;
margin: 12px 0 2px;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(145, 191, 1)), to(rgb(111, 149, 1)));
background-image: -webkit-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
background-image: -moz-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
background-image: -o-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
background-image: linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
border: 0;
font-weight: normal;
color: #fff;
text-shadow: 0 1px 0 white;
border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px;
width: 60px;
border-image: initial;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
저의 작품 ... 편집 : 오, 알았어요. 전환 중이 아닙니다 ... – mowwwalker
알렉스가 맞습니다. 사용자가이 질문에 대해 준 응답을 참조하십시오. http://stackoverflow.com/questions/3790273/webkit-support-for-gradient-transitions – mowwwalker