CSS 图像翻转文本

Question

我在个人网站上工作，我想要有滚动时的图像。对它们进行低不透明度淡入淡出并显示文本)

鼠标悬停时我的不透明度变淡了，但我无法显示文本。

这是我的代码。

HTML

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

CSS

#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');
}

我是否漏掉了一些非常明显的东西？

Answer 1

span:hover 不会触发，因为它设置为 display:none。相反，通过 a:hover 定位跨度:

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

http://jsfiddle.net/nXxb6/