Почему мое изображение перемещается, когда я нависаю над ним

Question

Итак, у меня есть изображение на моем веб-сайте внутри div с границей над ним размером 8 пикселей, например, когда я нажимаю img, он ссылается на страницу. Но когда я нависаю над изображением, он движется (что я считаю точно) 16px (длина границы с обеих сторон. Имеет ли это какое-либо отношение к тому факту, что div имеет границу, когда когда изображение зависает, это нет?. больше в DIV я не знаю, не почему-то с объяснением было бы здорово, вот мой код

HTML:..

<div id="box1" class="box"><br> 
    <a href="google.com"><img src="images/box1.png" /></a><br> 
</div><br> 

CSS:

.box { 
    height: 250px; 
    width: 250px; 
    margin-right: 20px; 
    border: 8px solid white; 
    float: left; 
    display: block; 
} 


img { 
    width: 250px; 
    height: 250px; 
    -moz-transform: rotate(0); 
    transform: rotate(0); 
} 

Я пытался вещи например img a: наведите указатель мыши на изменение, а также margin-left: -16px, но это тоже не сработало. Любая помощь быть оцененным. Благодаря

Answer 1

Вы должны использовать a img:hover, не img a:hover, как

img a:hover { 
    margin-left: -16px; 
} 

Answer 2

Я сделал JSFiddle вашей вещи, и нет теперь никаких проблем с зависанием. Я не уверен, что он когда-либо наводил курсор, но ваш CSS все в порядке. В нем не должно быть случайных <br> тегов, так как <br> не является частью CSS вообще. Вот ваш JSFiddle.

http://jsfiddle.net/PsW2S/