0

ホバー アクションにイメージ スプライトを使用したいのですが、1 時間作業していてうまくいきません。span 要素video-play-q-rightは背景としてスプライトを持っています。

これが私のスプライトです：

ここに画像の説明を入力

div のスクリーンショットを次に示します。

ここに画像の説明を入力

html は次のとおりです。

    <div class="video-box">
         <div class="video-img">
             <a href="#" onclick="window.open('http://url.html','photoessay','scrollbars=no,resizable=yes,width=800,height=600')">
             <img src="resources-na/images/video.jpg" width="200" height="155" border="1">
             <span class="video-play-q-right">play</span></a>
        </div>
        <div class="video-text">
            <p><strong> of Water</strong>.<br /> water's properties. (05:43 min)
            <a href="#" onclick="window.open('http://url.html','photoessay','scrollbars=no,resizable=yes,width=850,height=722')">... View</a></p>
        </div>
    </div>

CSSは次のとおりです。

.video-box{
    padding-right: 20px;
    float: left;
    width: 200px;
}
.video-img {
    background-color: #EEEEEE;
    border: 1px solid #DDDDDD;
    margin-bottom: 0 !important;
    padding: 4px;
    width: 200px;
    height: 155px;
}

.video-play-q-right {
    background: url("../images/video-play-q-big.png") no-repeat scroll 0 0 transparent;
    background-position: center top;
    height: 50px;
    position: absolute;
    text-indent: -9999em;
    width: 50px;
    left: 321px;
    top: 127px;
}

a.video-play-q-right:hover span{
    background-position: center bottom;
}
4

1 に答える 1

2

なぜa.video-play-q-right:hover spanですか？

video-play-q-right クラスとのリンクはありません。で置き換えてみてくださいa:hover .video-play-q-right

a.my-class:hover spana"を含むクラス my-class とのリンク (要素) を意味しますspan。

したがって、これをターゲットにします：

<a href="..." class="my-class"><span>Some text</span></a>

しかし、これではありません：

<a href="..."><span class="my-class">Some text</span></a>
于 2012-09-26T12:51:45.990 に答える