「css/divごとリンクボタンにする」の編集履歴（バックアップ）一覧に戻る

css/divごとリンクボタンにする - (2013/02/06 (水) 17:01:34) のソース

html
#highlight(linenumber,html){{
<div class="box">
  <a href="#">LINK</a>
  <img src="hoge.jpg" width="100" height="100" />
  <p>○○○○○○○○○○</p>
</div>
}}

css
#highlight(linenumber,css){{
div.box {
    position: relative;
    margin:0;
}
div.box:hover {
    text-decoration: underline;
}
a {
    display: block ;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
    background/*\**/: #fff\9; /*IE7、8用ハック 背景色をつけて、*/
    filter:alpha(opacity=0);  /*IE7、8用ハック フィルターで透明に*/
}
a:hover {
    background-color: #ffffff;
    opacity:0.3;
}
}}


a要素をブロック要素に変え、
width:100%;とheight:100%;と指定して、
親要素div.boxの上に絶対配置