21

CSS と HTML を使用して、このサイトのポートフォリオ ページSolid Giantと同様の効果を得るにはどうすればよいでしょうか?

私はこのようなものを置くだけでうまくいくと思っていました：

a img{
    margin-top: 5px;
}

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

しかし、img の代わりに :hover をリンクに置いても機能しませんでした。私は彼のコードとcssを精査しましたが、一生これを理解することはできませんでした. 助けてください ：）

4

6 に答える 6

43

position: relative動作します：

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

要素が移動されていないposition: relativeかのように、ドキュメント フロー内のスペースを予約することに注意してください。ただ、今回の場合は問題ないと思います。

于 2011-03-27T11:54:52.090 に答える
17

translate() も参照してください。

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-10T10:50:18.303 に答える
0

CSS/HTML5 アニメーションを使用することもできます: http://slides.html5rocks.com/#css-animation

position:relative セットを持つ別のparentdivでラップすることもできます:

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

.parent { 
    position:relative; 
}
.image { 
    position:absolute; 
    top:0px; 
    left:0px; 
}
.image:hover { 
    top:-15px; 
}
于 2011-03-27T11:59:58.747 に答える
-1

あなたが使用することができます#

HTMLで

<div> id="move" </div>

CSSで

#move {
position: relative;
top: 0;
transition: top ease 1s;
}
#move:hover {
top: -5px;
}
于 2021-08-21T05:26:19.930 に答える
-2

画像に id を付けます:

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


 #imgHover:hover { margin-top: -5px; }
于 2011-03-27T12:02:52.123 に答える
-2

IEが適切に動作する方法を認識できるように、HTMLにこれがあることを確認してください

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
于 2012-01-06T23:29:25.477 に答える