4

I am trying to show border color on hover over the list of items. When i move mouse over first row items, the second row items move towards right. Please check jsFiddle

<ul class="tiles">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

css

ul.tiles { width: 400px; }
ul.tiles li {
  float: left;
  list-style-type: none;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: white;
}
ul.tiles li:hover {
    border: 1px solid black;
}
}
user3785322
  • 153
  • 1
  • 6
  • 15
  • 2
    Instead of `border` use `outline` because `border` increase adds padding to the element. (`ul.tiles li:hover { outline: 1px solid black; }`) – Praveen Nov 11 '14 at 13:15
  • It worked. Is it the right way to do it. – user3785322 Nov 11 '14 at 13:17
  • It depends. currently you're not adding radius to the border and it is not one-sided too (example: border-left, right, etc.,). In your case `outline` is pretty enough. – Praveen Nov 11 '14 at 13:20
  • Here you can find good explanation http://stackoverflow.com/q/1158515/1671639 – Praveen Nov 11 '14 at 13:27

3 Answers3

5

Add a transparent border to your li:

li {
    border: 1px solid transparent;
}


ul.tiles { width: 400px; }
ul.tiles li {
  float: left;
  list-style-type: none;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: white;
}
ul.tiles li:hover {
    border: 1px solid black;
}

ul.tiles li {
    border: 1px solid transparent;
}
<ul class="tiles">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
dashtinejad
  • 6,193
  • 4
  • 28
  • 44
1

you can user box-sizing: border-box; on the ul.tiles li http://jsfiddle.net/gm8zvfsk/

The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.

Should they include the border-box or just the content-box which is the default value of the width and height properties.

For example, if you want two bordered boxes side by side, it can be achieved through setting box-sizing to "border-box". This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.

user3909166
  • 11
  • 1
0

JS Fiddle.

As Praveen said, using outline fixes the issue.

ul.tiles li:hover {
    outline: 1px solid black;
}
charles
  • 547
  • 1
  • 3
  • 11