CSS grid with single line on hover

Question

I have created a grid with div boxes on http://jsfiddle.net/TsRJy/.

The problem

I don't know how to make the a:hover work.

Info

Rewrite the HTML code as a table is not an option for me.
http://www.normann-copenhagen.com/Products succeded with this issue.
I prefer CSS before Javascript.

HTML (in case jsfiddle don't work)

<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 · Answer 1 · answered Sep 04 '12 at 06:28

4

You can use box-sizing property for this. Write like this:

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

Check this http://jsfiddle.net/TsRJy/1/

answered Sep 04 '12 at 06:28

sandeep

91,313
23
137
155

Paras · Answer 2 · 2012-09-04T06:38:47.487

1

Since you have put border, the hover effect is not working properly.

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

Look at this fiddle

Also here is a useful link

edited Sep 04 '12 at 06:38

answered Sep 04 '12 at 06:33

Paras

2,997
6
35
46

score 1 · Answer 3 · answered Sep 04 '12 at 06:38

Also another way to go, it's to set border-color the same color as the box's background-color and change it to black on hover:

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

Demo: http://jsfiddle.net/TrXT9/1/

score 1 · Answer 4 · answered Sep 04 '12 at 06:50

I see your wrapper has a width of 500px. If you make a div with a width of 100px, a border of 1px and a margin-right of -1px, the div is still 101px.

box-sizing:border-box is a beautiful way to solve this problem, but it is not supported in IE7

If you want IE7-support, you need to adjust your width and height like this:
http://jsfiddle.net/TsRJy/5/

Manish Sharma · Accepted Answer · 2012-09-04T09:34:28.437

1

try this one,just minor change in 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/

for more accurate result try this one also hope this one solve your issue

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

edited Sep 04 '12 at 09:34

answered Sep 04 '12 at 08:49

Manish Sharma

1,670
14
20

Close but a few lines are missing. – Jens Törnell Sep 04 '12 at 09:10
The CSS in the edit is almost perfect... Only one line is missing, the top line. – Jens Törnell Sep 04 '12 at 14:51
Your top line did not work when having 2 boxes. It took the whole width when it should just take 2 boxes wide. I updated your code to this: http://jsfiddle.net/W4NNd/3/ – Jens Törnell Sep 05 '12 at 17:33
@Jens Don't add things like "Jens' Update:" to posts when you update; *just fix the code*. The edit summary box is for telling users *what* you changed; the body of the answer should only ever contain code. If you have a substantial change, post your own answer. – user229044 Sep 05 '12 at 19:02

CSS grid with single line on hover

5 Answers5