0

私は微妙ですが厄介な問題を抱えています：CSS画像の置換で「閉じる」クロスを実装しようとしています。HTMLは

<div id='close' title='Close'>
    <a href='#'>
        <img src='https://dl.dropbox.com/u/116120595/images/tr_sq_30_30.png' />
    </a>
</div>

ここの画像は30px×30pxの透明な正方形です。CSSは

div.fadeOut div#close{
    margin:5px;
    width:30px;
    height:30px;
    background:url(https://dl.dropbox.com/u/116120595/images/blue_ccr_30_30.png) 0px 0px no-repeat;
    position:absolute;
    right:0px;
    top:0px;
}

div.fadeOut div#close:hover{
    background:url(https://dl.dropbox.com/u/116120595/images/red_ccr_30_30.png) 0px 0px no-repeat;
}

2つの画像は、30ピクセル×30ピクセルの透明な正方形で、青と赤の「閉じる」十字があります。の上ではなく、ホバリングする:hoverだけで応答するように見えるため、結果はあまりうまく機能しません。デモについてはこちらをご覧ください。div

私はここで何が間違っているのですか？

4

1 に答える 1

2

別の要素が閉じるボタンを部分的にオーバーレイしているようです。z-indexにプロパティを追加してみて、div#closeそれが役立つかどうかを確認してください。おそらく、より高い値を持つ別のpositioned要素があります。z-index

于 2013-03-20T05:57:56.987 に答える