CSS を使用してボタンの垂直グループを作成しようとしています。以前、unordered list を使用してこれを試みました。
それ以来、順序付けられていないリストを削除し、ボタンを要素として残しました。Chrome と FF ではすべて正常に動作しますが、IE8 では動作しません。「ホバー」状態がアクティブになるのは、ボタン全体ではなく、実際にリンクのテキストにカーソルを合わせたときだけです。ボックス全体をクリック可能にしたい。
私のHTMLからの関連コードは次のとおりです。
<div id="itemarea">
<a href="#" class="item_button" id="139" style="color: #4bb2c5" data-seq= "0">Skydiving</a>
<a href="#" class="item_button" id="140" style="color: #EAA228" data-seq= "1">Knitting</a>
<a href="#" class="item_button" id="141" style="color: #c5b47f" data-seq= "2">Checkers</a>
<a href="#" class="item_button" id="142" style="color: #579575" data-seq= "3">Surfing</a>
<button class="save_button" name="button" type="submit">Save</button>
</div>
CSSは次のとおりです。
#itemarea{
padding-bottom:20px;
margin-top:54px;
height:470px;
float:left;
width:200px;
padding-left:15px;
background-color:#CFCFCF;
border:2px solid gray;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
-o-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
-ms-filter: progid:DXImageTransform.Microsoft.Shadow( Strength=5, Direction=135, Color='#999999' );
filter: progid:DXImageTransform.Microsoft.Shadow( Strength=5, Direction=135, Color='#999999' );
}
.item_button {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
width:120px;
}.item_button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.item_button:active {
position:relative;
top:1px;
}
どうぞよろしくお願いいたします。