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

上进行转换

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

使用：将鼠标悬停在CSS上，并在悬停时为图片指定新位置。你甚至可以设置它的动画，以便它可以滑动＆＃34;到位。

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%;
}

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

如何在悬停时使图片在div中向上移动

5 个答案: