如何在懸停時使圖像在div中向上移動

Question

我有一個關於如何制作div的問題，當你將它懸停時，內部的圖像會向上移動到div中。

到目前為止這是我的代碼：

<div id="div1">
  <div id="div2">
    <img src="http://dummyimage.com/300x300/000/fff" width="300px" height="300px">
  </div>
</div>

CSS

#div1 { 
    width: 300px;
    height: 300px;
    border: 2px black solid;
    position: absolute;
    top: 100px;
    left: 500px;
    overflow: hidden;
}

#div2 img {
    position: absolute;
    top:200px;
}

位於div1中的這個圖像位於div的底部，其余的溢出被隱藏。 我希望它在div徘徊時向上移動。

關於如何解決這個問題的任何想法？ 我打算使用轉換css並翻譯它，但我不確定是否有更好的方法可以通過JQuery完成。

讓我知道你的想法

Answer 1

這是純粹的css方法，在hover進行過渡

 #div1 { width: 300px; height: 300px; border: 2px black solid; position: relative; overflow: hidden; } #div2 img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease-in; } #div1:hover img { top: 30%; } 

 <div id="div1"> <div id="div2"> <img src="http://placehold.it/350x150"> </div> </div> 

Answer 2

#div1:hover #div2 img{
    top: 100px; //change this number to get correct placement
} 

Answer 3

使用：將鼠標懸停在CSS上，並在懸停時為圖像指定新位置。 你甚至可以為它制作動畫，使其“滑行”到位。

Answer 4

你的圖像被不必要地包裹在div中。 只需將id分配給圖像本身

  <div id="div1">
        <img id="div2" src="http://www.maceire.com/wp-content/uploads/2015/01/grey- bac  kground-1-wide-hd-background-and-wallpaper.jpg" width="300px" height="300px">
  </div>

然后你可以操縱頂部的css值

var q = document.getElementById('div2');
q.style.top = '0px';

和

q.style.top = '200px';

上下移動

Answer 5

為了性能和簡單性，盡可能使用CSS，並在需要支持舊版瀏覽器時使用javascript。 只需使用CSS就可以輕松解決您的需求：

#div1 { width: 300px;
    height: 300px;
    border: 2px black solid;
    position: absolute;
    top: 100px;
    left: 500px;
    overflow: hidden;
}

#div2 img {
    position: absolute;
    top: 80%;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}

#div1:hover #div2 img {
    top: 0%;
}

此方法不要求您了解圖像的尺寸。