1

ホバー時に表示されるはずのdivタグが画像の後ろに隠れているという問題があります。これはそれがどのように見えるかです：

ここに画像の説明を入力してください

jsfiddleでリメイクしようとしました：http：//jsfiddle.net/Gwxyk/21/'.image-options ' でも相対位置を試しましたが、うまくいきませんでした。また、小さなオレンジ色のボックスを右側にフロートさせるにはどうすればよいですか？私はフロートを試しました：そうです。しかし、それは応答しませんでした。

ヘルプが評価されます。

stackoverflowが要求するための任意のコード（jsfiddle内）：

.image-options { 
float: right;

}

4

3 に答える 3

4

あなたが何をする必要があるのか​​ を正確に理解するのに苦労しています。ただし、z-index プロパティを使用してみましたか? div と画像の両方を相対的または絶対的に配置する必要があります。次に、前面に表示する要素により高い z-index を適用します。したがって、 z-index: 1 を画像に、 z-index: 100 を div に適用できます。

于 2012-10-31T10:24:15.627 に答える
0

これはあなたが期待しているものですか？

画像と内部divの場所を追加top:0して交換します。.image-options

デモ

于 2012-10-31T10:29:24.587 に答える
0

ほら、これはあなたを助けると思います。

http://jsfiddle.net/dmP2x/

jQuery でこれを行う必要はありません。できるだけ CSS を使用してコードを整理してください。

CSS:

 .testclass {
    width: 105px;
    height: 80px;
    overflow: hidden;
    display: inline-block;
    border: 2px solid rgba(140,140,140,1);
}

.image-options {
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255,128,64,1);
    position: absolute;
    top: 10px;
    left: 25px;
    overflow: none;
    display: none;
}
.image {
    background-image: url('http://www.placehold.it/105X80');
    width: 105px;
    height: 80px;
    position: relative;
}
.image:hover .image-options {
    display: block;
}

html:

<div class="testclass">
    <div class="image">
        <div class="image-options"></div>
    </div>
</div>​
于 2012-10-31T10:56:24.960 に答える