0

CSSの問題に関するアドバイスを期待しています-背景画像の上にリンクテキストを絶対に配置しているレイアウトがありますが、リンクをコンテナの高さまで拡張できません(IExではChromeで正常に動作します)

<div>
    <img />
    <a />            
</div>

含まれている div には背景色があり、画像の不透明度が減少します。画像をホバリングすると、不透明度がさらに減少し、背景色がさらに漏れます。同時に、リンクの不透明度が 0 から 100 に変化します。見栄えを良くするために、いくつかの CSS トランジションも使用しています。

リンクを配置するとフローから完全に削除されることはわかっているため、高さを 100% に設定しても機能しませんが、明示的に設定できないのでしょうか? これを行うと、Chrome では機能しますが、IE では機能しません。リンクが削除された場合、リンクは正しく動作するため、問題は画像に関連しています。

例: http://jsfiddle.net/thSCJ/8/ (私の問題を強調するのに十分な詳細が含まれています。IE では、画像の左上にカーソルを合わせるとリンクが表示されます。Chrome では、画像にカーソルを合わせるとリンクが表示されます) .

助言がありますか？

4

2 に答える 2

0

不透明度を変更する代わりに、単純にfont-sizeプロパティを変更して、全体を<a>タグに入れます。

この JSFiddle を参照してください。

于 2012-12-17T01:47:07.590 に答える
0

<a>画像とテキストをラップするタグが必要です。

<a href="#">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6kpJ562NTt7Vkya4ocQ3Aq7mVqNB04ccB9XNCr-b4mPdYU6Y5Yg" width=200 height=200/>
    <span>Link text</span>
</a>​

CSSは次のとおりです。

a {
    width:200px;
    height:200px;
    background:#cccccc;
}

a:hover > span {
    display: inline;
}

span {
    display: none;
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:200px;
    color:red;      
}

</p>

フィドル: http://jsfiddle.net/thSCJ/12/

于 2012-12-17T01:26:28.620 に答える