1

私は個人サイトで作業しており、ロールオーバーする画像が必要です。それらの上に低い不透明度のフェードを取得し、テキストを表示します)

ロールオーバー時に不透明度が薄れていますが、テキストを表示できません。

これが私のコードです。

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

本当に明らかな何かが欠けていますか？

4

1 に答える 1

0

に設定されているため、span:hoverはトリガーされませんdisplay:none。代わりに、次の方法でスパンをターゲットにしますa:hover。

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

http://jsfiddle.net/nXxb6/

于 2013-05-11T14:58:50.063 に答える