jquery - 如何在响应式图像上使悬停状态背景为 100% 宽度

Question

我已经创建了一些响应式图像，但想要显示用户名的悬停状态。

我已经设法使用 Css 和 Jquery 创建悬停状态，但不幸的是，当我更改屏幕宽度时，悬停背景不会保持 100%。

谁能解释实现 100% 宽度背景的最佳方法？我的背景图像上有填充，所以我无法使黑色背景与图像齐平。

这是一个 fiddle 来解释我的意思。

我希望这是有道理的。

http://jsfiddle.net/isherwood/x59tB/15/

.show-username{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-weight: bold;
    bottom: 0px;
    padding: 5px;
    font-size: 11px;
    width: inherit;
    display: none;
}

Answer 1

你有两个问题:

此 css 规则的宽度样式导致拉伸(stretch)问题。它总是会覆盖您现有的样式，因为 id 的优先级高于类选择器:

#upload-container ul li span {
    font-size: 16px;
    line-height: 22px;
    display: block;
    width: 82%; // <---- Move this style
    position: absolute;
    bottom: 13px;
 }

第二次为您的 .show-username css 规则添加左右声明:

.show-username{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-weight: bold;
    bottom: 0px;
    padding: 5px;
    font-size: 11px;
    width: inherit;
    display: none;
    right: 10px;
    left: 10px;
}