CSS 이미지 롤오버 텍스트

Question

개인 사이트에서 작업 중이며 롤오버 할 때 이미지를 갖고 싶습니다.

나는 롤오버에 희미한 불투명도가 있지만 텍스트가 나타나지 않을 수 있습니다.

여기 내 코드입니다.

HTML

<li class="item i1"> 
    <a href="#"> 
     <span>Vest &pound;18</span> 
     </a> 
</li><!-- end item --> 

#featured ul li.item { 
    height: 200px; 
    width: 256px; 
    display: inline; 
    float: left; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

#featured ul li.item a { 
    color: #fff; 
    width: 256px; 
    height: 200px; 
    display: block; 
    transition: .3s; 
    -moz-transition: .3s; 
    -webkit-transition: .3s; 
    -o-transition: .3s; 
} 

#featured ul li.item a:hover { 
    background: white; 
    opacity: .70; 
} 

#featured ul li.item a span { 
    display: none; 
    width: 256px; 
    height: 200px; 
    font-size: 13px; 
    color: red; 
} 

#featured ul li.item a span:hover { 
    display: block; 
} 

.i1 { 
    background: url('../img/1.jpg'); 
} 

난 정말 뭔가를 분명 실종 CSS?

Answer 1

으로 설정되어있어 span:hover이 트리거되지 않습니다. 대신, a:hover를 통해 범위를 대상 :

#featured ul li.item a:hover span { 
    display: block; 
} 

http://jsfiddle.net/nXxb6/