내 CSS 전환이 작동하지 않습니다

Question

저는 li을 가져 왔을 때만 표시되는 p 태그가있는 li가 있지만 그 사이에 전환을 가져올 수 없습니다. 어떻게 할 수 있습니까?

* {margin:0;padding:0;} 

.promo-line.two li:nth-child(1) { 
    background: red; 
} 

.promo-line.two li:nth-child(2) { 
    background: blue; 
} 

.promo-line.two li:nth-child(3) { 
    background: yellow; 
} 

.promo-line li p { 
    display: none; 
    transition: all 1s ease-in-out; 
} 

.promo-line li:hover > p { 
    display: block; 
    background: rgba(0,0,0,0.5); 
    color: white; 
    width: 314px; 
    height: 180px; 
    line-height: 180px; 
    text-align: center; 
    font-size: 25px; 
    box-shadow: inset 5px 5px 40px black; 
} 

.promo-line li { 
    position: relative; 
    width: 314px; 
    height: 180px; 
    margin: 0 0 0 4px; 
    float: left; 
    background: purple; 
} 

Answer 1

대신 opacity 속성을 사용할 필요가 http://jsfiddle.net/GB4QL/2/

참조 : 아마 자바 스크립트의 수 엉 JQuery와, 나는 어쨌든

<ul class="promo-line two"> 
    <li> 
     <p>36%</p> 
    </li> 
    <li> 
     <p>45%</p> 
    </li> 
    <li> 
     <p>50%</p> 
    </li> 
</ul> 

그리고 내가이 문제를 해결할 수있는 방법을 모른다 display

* {margin:0;padding:0;} 

.promo-line.two li:nth-child(1) { 
    background: red; 
} 

.promo-line.two li:nth-child(2) { 
    background: blue; 
} 

.promo-line.two li:nth-child(3) { 
    background: yellow; 
} 

.promo-line li p { 
    opacity: 0; 
    background: rgba(0,0,0,0.5); 
    color: white; 
    width: 314px; 
    height: 180px; 
    min-height:180px; 
    line-height: 180px; 
    text-align: center; 
    font-size: 25px; 
    box-shadow: inset 5px 5px 40px black; 
    transition: all 1s ease-in-out; 
} 

.promo-line li:hover > p { 
    opacity: 1; 

} 

.promo-line li { 
    position: relative; 
    width: 314px; 
    height: 180px; 
    margin: 0 0 0 4px; 
    float: left; 
    background: purple; 
}