0

マウスオーバー時に画像の上に境界線を描画したいのですが、CSS だけで実現できます。

私の構造は非常に単純です。

<div class="outer">
    <div class="overlay"></div>
    <img />
</div>

アイデアは.overlay、5px の境界線を取得し、マウスを重ねると表示されるようにすることです.outer

画像の幅/高さは任意です。不明であり、排他的に指定することはできません。

唯一の問題は、ボックス モデルの法則により、右と下の境界線が の外側にレンダリングされてしまう.outerことです。100% width / height.overlayouter

私が説明しようとしていることを完全に理解するには、私の jsFiddle を参照してください。

.overlay画像の上に境界線を完全に表示するために、必要な幅と高さを正確に設定するにはどうすればよいですか? クロスブラウザー互換のソリューションを探しているので、問題のある要素のボックスモデルの動作を変更することはオプションではないようです。

4

2 に答える 2

1

との代わりに、width:100%;との位置をheight:100%に設定rightします。bottom0px

http://jsfiddle.net/hTECe/3/

デフォルトでは、画像の下に小さな余白があることに注意してください。これは、次のいずれかのソリューションで解決できます。

  • 画像を に設定しdisplay:blockます。（この質問を参照してください）
  • 画像のvertical-alignをtop、middle、またはbottom
  • 外line-height枠の を0

CSS

.outer img
{
   display:block;
}

.outer:hover .overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    right:0px;
    bottom:0px;
    border: 5px solid white;
    opacity: 0.75;
}
于 2013-10-20T00:50:12.457 に答える
1

オーバーレイdivsではなく、疑似要素を使用して:afterください。動的コンテンツで機能し、親要素のみが必要です。

基本的に、親divをdisplay:inline-block子と同じサイズに設定するだけです。次に、:afterコンテンツをwidth:100%/ height:100%- に設定して、動的画像のサイズを取得します。HTML は単純です。div追加overlayのクラスは必要なく、parent が 1 つしか必要ないためです。

ここでjsFiddle

HTML - 非常にシンプル - 冗長性はありません。

<div>
    <img src="https://si0.twimg.com/profile_images/2704840564/ace6835dc7c12861b013a8f1ac3b1041.png">
</div>

CSS

div {
    display: inline-block;
    background: red;
    position: relative;
}

img {
    vertical-align: top;
}

div:hover:after {
    content: "\A";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 5px solid black;
    opacity: 0.75;
    background: red;
    z-index: 2;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
于 2013-10-20T00:46:51.703 に答える