http://jsfiddle.net/TsRJy/にdivボックスを含むグリッドを作成しました。
問題
a:hoverを機能させる方法がわかりません。
情報
- HTMLコードをテーブルとして書き直すことは、私にとってオプションではありません。
- http://www.normann-copenhagen.com/Productsはこの問題で成功しました。
- 私はJavascriptよりもCSSを好みます。
HTML(jsfiddleが機能しない場合)
<div class="container">
<div class="grid">
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
<div class="item">
<a href="#">
</a>
</div>
</div>
</div>
CSS
.container {
margin: 0 auto;
width: 500px;
}
.item {
border: 1px solid #ccc;
float: left;
margin: 0 -1px -1px 0;
}
.item a {
display: block;
height: 100px;
width: 100px;
background: #f5f5f5;
}
.item a:hover {
border: 1px solid black;
}