我在 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;
}
最佳答案
您可以使用box-sizing属性来实现此目的。像这样写:
.item a:hover {
border: 1px solid black;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
关于悬停时带有单行的 CSS 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12257837/