移動鏈接圖像5px懸停

如何使用CSS和HTML實現類似於本網站投資組合頁面Solid Giant的效果？移動鏈接圖像5px懸停

我原以爲只是把像這樣的工作：

a img{ 
    margin-top: 5px; 
} 

a img:hover{ 
    margin-top: 0px; 
}

但它沒有工作，即使我把：鏈接，而不是IMG上徘徊。我搜遍了他的代碼和CSS，但是我不能爲我的生活弄清楚這一點。請幫助:)

來源

2011-03-27 Amanda

position: relative將工作：

a img:hover{ position: relative; 
      top: -5px;}

注意position: relative保留在文檔流的空間彷彿元素是不移動。但我認爲在這種情況下，這不是一個問題。

來源

2011-03-27 11:54:52

1對'位置的信息：relative'。不知道。 – Wex 2012-01-06 23:43:38

添加padding-bottom：5px擺脫'閃爍' – 2013-01-03 16:07:59

謝謝！正是我需要的。 – 2013-09-27 19:18:20

你也可以使用CSS/HTML5動畫：http://slides.html5rocks.com/#css-animation

，你也可以把它包在具有位置的另一parentdiv：相對集：

<div class="parent"> 
    <img class="image" /> 
</div> 

.parent { 
    position:relative; 
} 
.image { 
    position:absolute; 
    top:0px; 
    left:0px; 
} 
.image:hover { 
    top:-15px; 
}

來源

2011-03-27 11:59:58

-2

給圖像一個id：

<img id="imgHover" src="" /> 


#imgHover:hover { margin-top: -5px; }

來源

2011-03-27 12:02:52 Lauw

-3

確保你在你的html中有這個，所以IE知道如何正常工作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

來源

2012-01-06 23:29:25 Doug

另見翻譯（）：

http://www.w3schools.com/css/css3_2dtransforms.asp

img:hover { 
    -moz-transform: translate(-2px, -2px); 
    -ms-transform: translate(-2px, -2px); 
    -o-transform: translate(-2px, -2px); 
    -webkit-transform: translate(-2px, -2px); 
    transform: translate(-2px, -2px) 
}

看到類似的工作實施例：
http://jsfiddle.net/rimian/7aPvS/1/

來源

2014-03-10 10:50:18 Rimian

移動鏈接圖像5px懸停

回答

相關問題