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

我试图在图像的顶部显示一块文本，使其仅在图像上悬停时显示。文本显示如我所愿，但应用于div的背景不是

以下是JSFIDLE：

将鼠标悬停在图像上会显示单词stars，但我希望它在单词stars下面显示白色背景。我做错了什么

谢谢

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;
} 

使用position:absolute to。添加_评级和position:relative to parent div

你的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;
}

使用position:absolute to。添加_评级和position:relative to parent div

你的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;
}

---

您需要添加一个位置属性，而不是默认的静态属性，这样您就可以创建一个新的位置属性，并应用z索引。添加位置：相对位置；to.pu:悬停.add_rating将使您能够将.add_rating的背景置于图像顶部

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

---

您需要添加一个位置属性，而不是默认的静态属性，这样您就可以创建一个新的位置属性，并应用z索引。添加位置：相对位置；to.pu:悬停.add_rating将使您能够将.add_rating的背景置于图像顶部

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

---

我帮你清理一下小提琴上的垃圾CSS，你介意吗？看一看

注意：您正在使用！重要的是你应该忽略它，除非 必要的，我已经大幅削减了你的CSS

---

我帮你清理一下小提琴上的垃圾CSS，你介意吗？看一看

注意：您正在使用！重要的是你应该忽略它，除非 必要的，我已经大幅削减了你的CSS

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