2014-01-12 75 views
0

因此,我在我的網站上有一個圖像,內有一個8像素的邊框,像一個縮略圖,這樣當我點擊圖像時,它會鏈接到一個頁面。但是當我將鼠標懸停在圖片上時,它會移動(我認爲是精確的)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


我補充說,在我之後粘貼代碼,因爲預覽wasnt顯示它與我行 - 我沒有BR在CSS IRL! – user2903379

回答

0

你必須使用a img:hover,不img a:hover,像

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

我做你的事情的jsfiddle現在還與懸停沒有問題。我不確定它是否曾經懸停過,但是你的CSS全部都是重擊。不應該有隨機的<br>標籤,因爲<br>根本不屬於CSS的一部分。這是你的JSFiddle。

http://jsfiddle.net/PsW2S/

+0

謝謝,我的css沒有
標籤,它只是當我在網站上寫它沒有任何行,所以我不得不添加它們,但然後它在這個頁面上有他們,所以這是一個錯誤mybehalf – user2903379

相關問題