0

我正在创建顶部有链接的图像。图像已设置为相对，图像底部的链接为绝对。基本上它是图像顶部的链接，具有绝对位置和固定宽度和高度。悬停时，链接的背景会改变它的颜色。每当我单击链接时就会出现问题：它位于图像的顶部（在 Opera 和 IE 上它停留在那里）。以图片为例：

下图是带链接的正常图片状态（悬停背景透明度发生变化）。 在此处输入图像描述

下图中是a:active链接的状态。
在此处输入图像描述

它保持为绝对元素，但改变了它的位置。我尝试过申请a:active这些选项：从正常状态和悬停状态复制所有内容position:static;，甚至尝试放置一个margin-top需要保持在底部的大小 - 不走运。

这是它的css代码：

.image-with-link {width:300px; height:135px; position:relative; float:left; overflow:hidden;}
.image-with-link a {width:280px; height:18px; position:absolute; bottom:20px; left:0; padding:5px 10px; color:#fff; text-align:left; background: rgba(0,0,0,0.3); overflow:hidden;}
.image-with-link a:hover {background: rgba(0,0,0,0.5);}

（不再需要链接）。

4

3 回答 3

1

您在 custom.css 的第 79 和 194 行有冲突的 CSS，它覆盖了绝对定位：

您正在声明：

a:active, a:focus {
    position:relative;
    top:1px;
}

在第 194 行：

.kategorijos .vienas a:active {
    position:static;
}

这两者都导致了问题。您希望该项目保持position:absolute：活动。

于 2013-07-25T09:51:20.950 回答
1

这是你的问题：

a:active,
a:focus{
    /* Give clicked links a depressed effect. */
    position:relative;
    top:1px;
}

您覆盖position，但不在top以下选择器中：.kategorijos .vienas a。你应该添加top: initial修复。我认为这position: static是设计使然：

.kategorijos .vienas a:active {position:static;background: url('../images/arrow.png') 270px 4px  no-repeat rgba(0,0,0,0.5);}

这会将链接移动到图像下方。

于 2013-07-25T09:52:22.147 回答
0

试试这个，我想这会工作:)

a:active, a:focus {
    position: relative;
    top: 1px;
}

.kategorijos .vienas a:active {
    position: static;
}
于 2013-07-25T10:08:17.383 回答