배경 전환이 작동하지 않는 이유는 무엇입니까?

첫 번째 CSS 전환을 만들려고하는데 작동하지 않습니다. 나는 전환을 .btn-zen-inverse : hover 대신 넣어 짧은 코드를 사용해 보았습니다. 왜 작동하지 않는거야? (크롬의 최신 버전에서 테스트) 모든배경 전환이 작동하지 않는 이유는 무엇입니까?

.btn { 
 
    color: white; 
 
    font-family: 'ZLight'; 
 
    border: 2px solid white !important; 
 
    box-shadow: 0 0 6px rgba(12, 41, 63, 0.3); 
 
    text-shadow: none; 
 
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.21) 100%); 
 
    /* FF3.6+ */ 
 
     
 
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.21) 100%); 
 
    /* Chrome10+,Safari5.1+ */ 
 
     
 
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.21) 100%); 
 
    /* Opera 11.10+ */ 
 
     
 
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.21) 100%); 
 
    /* IE10+ */ 
 
     
 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.21) 100%); 
 
    /* W3C */ 
 
     
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#6bffffff', GradientType=0); 
 
    /* IE6-9 */ 
 
     
 
    padding: 3px; 
 
} 
 
.btn:hover { 
 
    transition: background-image 0.5s; 
 
    transition: background-color 0.5s; 
 
    -moz-transition: background-image 0.5s; 
 
    /* Firefox 4 */ 
 
     
 
    -webkit-transition: background-image 0.5s; 
 
    /* Safari and Chrome */ 
 
     
 
    -webkit-transition: background-color 0.5s; 
 
    /* Safari and Chrome */ 
 
     
 
    -o-transition: background-image 0.5s; 
 
    /* Opera */ 
 
     
 
    color: white; 
 
} 
 
.btn-zen-inverse { 
 
    background-color: #273032; 
 
} 
 
.btn-zen-inverse:hover { 
 
    background-image: none; 
 
    background-color: #273032; 
 
}

<a class="btn btn-zen-inverse btn-large"> 
 
    <span>Prova Zenconomy Gratis</span> 
 
</a>

출처

2012-10-10 Himmators

작동하지 않는다는 것은 무엇을 의미합니까? – BoltClock

그라디언트에서 'none'으로 전환 할 수 없습니다. 왜냐하면 그것이 당신이 시도하는 것처럼 보이기 때문입니다. – Prinzhorn

첫째, 당신의 전환 정의는 기본 클래스 정의의 일부가 될 필요가

예 :

div { 
    transition: background-color 0.5s; 
}

대신

과 실제 변화 "효과", 당신은 호버 의사 수준이 같은

에 위치 할 경우 :

div:hover { 
    background-color: red; 
}

하고 기본 클래스 정의 :

div { 
    background-color: white; 
}

그 말은, 나는 당신이 배경 "짧은 손"스타일을 깰 수 없다는 것을 99.7 % 확신한다. 기본 클래스와 의사 클래스 정의에서 전환하려는 개별 스타일 (예 : 배경색 및 배경 이미지)을 분리 해보십시오.

편집 : 분명히 그라디언트를 "none"으로 전환 할 수 있습니다.

출처

2012-10-10 07:38:14

'transition : background-color, background-image 0.5s, 0.5s'와 같은 것을 가질 수 있다고 생각합니다. 전이의 다른 요소는 동일한 '이행'정의에서 선언되어야하며, 그렇지 않으면 후자는 전의 정의보다 우선합니다. 사양을 확인하십시오. – TonioElGringo

예, 'transition : width 2s, height 2s, transform 2s;'와 같은 1 개의 전환 선언에서 여러 스타일을 제공 할 수 있습니다. '배경색'스타일을 전환 할 때 '배경'스타일. 제 경험으로는 여러분이 그렇게 할 수 있다고 생각지 않습니다, 그래서 저는'background' 스타일을 분리 된 부분으로 분해 할 것을 제안했습니다. –

속기 속성을 속기 속성으로 구성 요소로 분해 할 수 없다는 것을 의미한다면 ... 그래 넌 할수있어. – BoltClock

배경 전환이 작동하지 않는 이유는 무엇입니까?

답변

관련 문제