在图像顶部的文本块上的背景颜色

我试图在图像顶部显示文本块，使其仅显示在图像上悬停的方式。文本显示为我想要的但是，应用于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; 
}

来源

2013-06-03 Grishma U

只需添加'位置：相对于'.addRating'类。 –

您需要添加位置属性oth呃比默认，static，这样你就可以创建一个新的stacking context，所以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-03 07:54:27 Adrift

使用position：以.add_rating和position:relative绝对于母公司的股利

你的CSS是相当长，这是不是真的需要那么压缩它像这样

.pu { 
    display:block; 
    width:185px; 
    position:relative 
} 

.add_rating { 
    position:absolute; 
    bottom:0; left:0; 
    min-width: 140px; 
    background: rgb(255,255,255); 
    color: #f00; 
    text-align: center; 
    display: none; 
    margin-top: -30px; 
    margin-bottom: 12px; 
    width: 100%; 
    min-height: 22px; 
} 

.pu:hover .add_rating { 
     display: block; 
}

DEMO

来源

2013-06-03 07:53:54 Sowmya

你不介意我打扫你的提琴一些毫无价值CSS？看看

Demo

.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-03 07:58:09

在图像顶部的文本块上的背景颜色

回答

相关问题