Question

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

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

感谢。

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

Answer 1

您需要添加默认值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/

Answer 2

如果我在你的小提琴中清理了一些垃圾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

Answer 3

使用position：absolute to .add_rating and 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;
}

<强> DEMO

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

3 个答案: