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

您需要添加一个除默认值之外的位置属性，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 回答
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 回答
1

使用 position:absolute.add_rating和position:relative父 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;
}

演示

于 2013-06-03T07:53:54.387 回答