2014-01-12 1 views
0

그래서 내 웹 사이트에 div가있는 테두리 안에 8px의 미리보기 이미지와 같은 이미지가 있으므로 img을 클릭하면 해당 페이지로 연결됩니다. 하지만 이미지 위에 마우스를 올리면 (정확하게 생각하는 것) 16px (양쪽에있는 테두리의 길이입니다. 이미지가 가로 놓인 경우 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 : 물건을 바꾸기 위해 마우스를 올리면 왼쪽 여백도 남았습니다 : -16px하지만 그 중 아무 것도 작동하지 않습니다. 감사하겠습니다. 감사합니다

+1

당신이 난 이후에 내가 미리보기 라인 그것을 나에게 보여주는 않네 때문에의 코드를 붙여 덧붙였다 CSS를 – AtanuCSE

+0

에서
필요하지 않습니다 - 내가 CSS를 IRL에서 BR을 필요 없다! – user2903379

답변

0

당신은 내가 당신의 일의 JSFiddle을 만들어 떠오르게하는 문제는 이제 없다

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

처럼 a img:hover하지 img a:hover을 사용해야합니다. 나는 이제까지 공중 선회 했는 지, 그러나 당신의 CSS가 모든 구타인지 확실하지 않다. <br>은 CSS의 일부가 아니기 때문에 임의의 <br> 태그가 포함되어서는 안됩니다. 여기 JSFiddle이 있습니다.

http://jsfiddle.net/PsW2S/

+0

덕분에, 내 CSS에는
태그가 있습니다. 웹 사이트에서이 코드를 썼을 때 코드를 추가하지 않아도되었지만이 페이지에 해당 코드가 있기 때문에 mybehalf의 실수였습니다. – user2903379

관련 문제