悬停时带有单行的 CSS 网格答案

【问题标题】：CSS grid with single line on hover悬停时带有单行的 CSS 网格
【发布时间】：2012-08-28 18:42:57
【问题描述】：

我在http://jsfiddle.net/TsRJy/ 上创建了一个带有 div 框的网格。

问题

我不知道如何使 a:hover 工作。

信息

将 HTML 代码重写为表格不是我的选择。
http://www.normann-copenhagen.com/Products 成功解决了这个问题。
我更喜欢 CSS 而不是 Javascript。

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;
}

【问题讨论】：

标签： css grid hover border margin

【解决方案1】：

试试这个，只是在 css 上做些小改动

.container {
    margin: 0 auto;
    width: 500px;
}

.item { float: left; }

.item a {
    display: block;
    height: 99px;
    width: 99px;
    background: #f5f5f5;
    border: solid 1px #d6d6d6;
    border-width: 0 1px 1px 0;
}

.item a:hover {
    border: solid 1px #f00;
    margin: -1px 0 0 -1px;
}

http://jsfiddle.net/GtR3P/

为了更准确的结果试试这个也希望这个解决你的问题

.container {
    margin: 0 auto;
    width: 506px;
}

.item { float: left; }

.item a {
    display: block;
    height: 100px;
    width: 100px;
    background: #f5f5f5;
    border: solid 1px #d6d6d6;
    border-width: 0 1px 1px 0;
}

.item a:hover {
    border: solid 1px #f00;
    margin: -1px 0 0 -1px;
}

.grid .item:nth-child(5n+1) a { border-left-width:1px; }

.grid .item:nth-child(5n+1) a:hover { margin:-1px 0 0 0; }

【讨论】：

关闭，但缺少几行。
编辑中的 CSS 几乎是完美的……只缺了一行，顶行。
您的顶行在有 2 个盒子时不起作用。当它应该只占用 2 个盒子宽时，它占用了整个宽度。我将您的代码更新为：jsfiddle.net/W4NNd/3
@Jens 更新时不要在帖子中添加“Jens 更新：”之类的内容； 只需修复代码。编辑摘要框用于告诉用户什么您更改了；答案的主体应该只包含代码。如果您有重大更改，请发布您自己的答案。

【解决方案2】：

我看到您的包装器的宽度为 500 像素。如果你制作一个宽度为 100px、边框为 1px、margin-right 为 -1px 的 div，则该 div 仍然是 101px。

box-sizing:border-box 是解决这个问题的好方法，但在 IE7 中不支持

如果你想支持 IE7，你需要像这样调整你的宽度和高度：
http://jsfiddle.net/TsRJy/5/

【讨论】：

【解决方案3】：

还有另一种方法，将边框颜色设置为与框的背景颜色相同的颜色，并在悬停时将其更改为黑色：

.item a {
    display: block;
    height: 100px;
    width: 100px;
    background: #f5f5f5;
    border: 1px solid #f5f5f5;
}
.item a:hover {
    border-color: black;
}

演示：http://jsfiddle.net/TrXT9/1/

【讨论】：

【解决方案4】：

由于你放了边框，所以悬停效果不能正常工作。

.item a:hover {
    box-shadow: 2px 2px 2px #333;
    background-color:Teal
}

看看这个fiddle

这里还有一个有用的link

【讨论】：

【解决方案5】：

您可以为此使用 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/

【讨论】：