Question

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

问题

我不知道如何制作a：悬停工作。

信息

重写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/

Answer 2

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

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

看看这个fiddle

此处还有一个有用的link

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

Answer 4

我看到你的包装器宽度为500px。如果你创建一个宽度为100px的div，1px的边框和-1px的margin-right，div仍然是101px。

box-sizing:border-box是解决此问题的一种很好的方法，但在IE7中不支持

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

Answer 5

试试这个，只是对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网格

5 个答案: