전환이 100 % 너비로 작동하지 않습니다.

Question

전환이 작동하지 않습니다. 누군가 도움을 줄 수 있습니까? 너비가 텍스트와 고정 너비가 아닌 100 % 너비가 작동하지 않는 한 길게하고 싶습니다. 어디서 실수입니까?! 나는 자동차에 그것을 폭을 설정하지만 ... http://jsfiddle.net/6Lso4jt1/

<a href="#" class="hotspot"><span class="hotspot-info">bsf ksv nvd</span></a> 

.hotspot { 
display: block; 
width: 40px; 
height: 40px; 
background: #c23538;} 

.hotspot:hover .hotspot-info { 
width: auto; 
white-space: nowrap; 
display: block; 
height: 40px; 
padding: 0 10px;} 

.hotspot-info { 
position: absolute; 
transition:width 100ms ease-in-out; 
width: 0; 
background-color: #c23538; 
height: 40px; 
color: white; 
line-height: 40px; 
overflow: hidden;} 

Answer 1

당신은 CSS 속성을 지정하려면 전이 속성을 사용할 수있는 변화가 없다보다.

transition-property: width; 
-webkit-transition-property: width; 
transition: 100ms ease-in-out; 

데모 : http://jsfiddle.net/6Lso4jt1/2/

또 다른 방법 : 사용 transition: all 100ms ease-in-out;하고 CSS 속성을 지정할 필요가 없습니다.

이 정보가 도움이되기를 바랍니다.