Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
CSSの背景色を使ってマウスオーバー時、画像に枠をつける。 - CodingMania

2011/3/13

CSSの背景色を使ってマウスオーバー時、画像に枠をつける。

ボックスの余白を塗りつぶすことで画像に太いボーダー表示します。

背景画像を使うと印象が違ってよいかもしれません。

HTMl

<div class="mod_Rollover001">
<p><a href="#"><img src="photoimage.jpg" width="220" height="124"></a></p>
<!--mod_Rollover001_end--></div>

CSS

.mod_Rollover001 a{
	width:220px;
	height:124px;
	padding:9px;
	display:block;
	border:1px solid #999;
	background:#FFF;
}
.mod_Rollover001 a:link    {}
.mod_Rollover001 a:visited {}
.mod_Rollover001 a:hover   {background:#666;}
.mod_Rollover001 a:active  {background:#666;}