1

画像の上にカーソルを置いたときにのみ表示されるように、画像の上にテキストのブロックを表示しようとしています。テキストは希望どおりに表示されますが、div に適用される背景は表示されません。

これがjsfiddleです：http://jsfiddle.net/HZqyA/1/

画像にカーソルを合わせると星という単語が表示されますが、「星」という単語の下に白い背景で表示したいと思います。私は何を間違っていますか？

ありがとう。

jsfiddle の CSS を以下に貼り付けます。htmlの貼り付けに問題があります




CSS: 
.pu {
    display:block;
    width:185px;
}

.add_rating {
  min-width: 140px;
  display: inline-block;
   background: rgb(255,255,255);
    background-color: rgb(255,255,255);
    color: #f00;
    text-align: center;
}

.pu .add_rating {
    display: none;
    margin-top: -30px;
    margin-bottom: 12px;
    width: 100%;
    background:  rgb(255,255,255);!important;
    background-color:  rgb(255,255,255);!important;
    background-image:  rgb(255,255,255);!important;
    min-height: 22px;
}

.pu:hover .add_rating {
  display: block;
     background:  rgb(255,255,255);!important;
    background-color:  rgb(255,255,255);!important;
    background-image:  rgb(255,255,255);!important;
    z-index: 1000;
}
4

3 に答える 3

2

あなたのフィドルにある不要な CSS を削除してもよろしいですか? 見てみる

デモ

.pu {
    position: relative;
    display: inline-block;
}

.pu:hover .add_rating {
    display: block;
    color: #f00;
}

.add_rating {
    display: none;
    position: absolute;
    bottom: 5px;
    background: #fff;
    width: 100%;
    text-align: center;
}

注:!important必要な場合を除き、無視する必要があるものを使用しています。CSS を大幅に切り詰めました。

于 2013-06-03T07:58:09.900 に答える
2

static新しいスタッキング コンテキストを作成して適用できるように、デフォルト以外の位置プロパティを追加する必要がありz-indexます。に追加position: relative;すると、画像の上に.pu:hover .add_ratingの背景を配置できます。.add_rating

.pu:hover .add_rating {
display: block;
background:  rgb(255,255,255);
position: relative;
z-index: 1000;
}

http://jsfiddle.net/HZqyA/3/

于 2013-06-03T07:54:27.783 に答える