ちょっと役立たずなサイトで面白がって、あれこれ練習していました。リンクが右側ではなく左側でしかクリックできないという問題に遭遇しました。
どのように見えるか: div、その中にリンクを含むヘッダー(2)
<div class="button one"><h2><a href="#">example</a></h2></div>
右ボーダー、ホバー機能、かなりの幅があります。絶対位置です。少し試してみて、次のコードを思いつきました(少し面倒です、申し訳ありません)
.button{
position:absolute;
padding:0px;
margin:0px;
width:300px;
height:70px;
background-color:#999999;
border-left:solid 7px #FF6600;
border-bottom:solid 1px #FF6600;
border-top:solid 1px #FF6600;
}
.button h2{
padding:0px;
margin:0px;
text-transform:uppercase;
color:#FFFFFF;
font-size:1,5em;
}
a{
margin:0px;
display:block;
text-decoration:none;
color:#FFFFFF;
padding:20px;
}
a:hover{
background-color:#FF6600;
}
問題: リンクは幅の約 1/2 のリンクだけです。ホバーの背景色は領域全体を変更しますが、マウスがそのリンク領域にある場合にのみ機能します。どこで何かを逃したのかわからない。すべての助けに感謝します!
css および html ファイル自体を調べたい人のために、それらを test.rar ファイルに入れます: http://www.sendspace.com/file/pe42e0