2

css を使用して画像にアウトラインを重ねようとしていますが、アウトラインが表示されません。アウトラインを背景色に置き換えると問題なく動作しますが、意図したフレーミング効果が得られません。境界線も使用してみましたが、divのサイズが大きくなったため、機能しません。画像サイズが動的であるため、オーバーレイ div の高さと幅を 100% にする必要があります。

<figure class="visual-thumbnail" style="overflow:hidden;position:relative;">
<div class="img-info"></div>

        <a href="http://innovationinhr.com/apploi/?p=351" class="thumbnail">
        <img width="326" height="434" src="http://innovationinhr.com/apploi/wp-content/uploads/2013/07/unknown-326x434.jpeg" class="attachment-visual-thumbnail wp-post-image" alt="Sharif">        



        </a>
    </figure>


figure{ display:block;overflow: hidden;
position: relative;width:326px;height:435px;}


.img-info {
outline: solid black 25px;
background-color: black;
left: 0;
top: 0;
opacity: 0;
position: absolute;
filter: alpha(opacity = 0);
width: 100%;
z-index: 1000;
height: 100%;
}
.visual-thumbnail:hover .img-info{
opacity:.5;
}

http://jsfiddle.net/P4nEK/1/

アウトラインが表示されない理由はありますか?

4

2 に答える 2

1

MrLister が指摘したように、主な問題は、あなたがoverflow:hiddenフィギュアに乗っていることです。 このフィドルは、あなたが働きたかった基本的なアイデアを示しています。

別の注意として、z-index は同じコンテキスト内の要素にのみ影響します。 ここにそれについての本当に良い記事があります。だから、あなたが本当にやろうとしているのは、他のdivを画像の下に置き、ホバー時に境界線を表示させることだと思います。これを行うには、同じコンテキストで描画する必要があります。つまり、すべてがposition属性を持っている必要があります。これが機能するフィドルです：http://jsfiddle.net/P4nEK/6/

于 2013-07-19T13:32:47.703 に答える