css - 悬停时带有单行的 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;
}

score 4 · Accepted Answer

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

score 1 · Accepted Answer

由于您已放置边框，因此悬停效果无法正常工作。

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

看看这个小提琴

这里还有一个有用的链接

score 1 · Accepted Answer

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

.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/

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

试试这个，只是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 - 悬停时带有单行的 CSS 网格

5 回答 5

Related

Reference