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アイテムを:activeにしておく必要があります。

于 2013-07-25T09:51:20.950 に答える
0

これを試してください、私はこれがうまくいくと思います:)

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

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