悬停时带有单行的 CSS 网格

Question

我在 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;
}​
​

Answer 1

您可以使用box-sizing属性来实现此目的。像这样写:

.item a:hover {
    border: 1px solid black;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

检查这个http://jsfiddle.net/TsRJy/1/