Question

我想知道如何在本网站上找到“在悬停时滚动到顶部”功能：http://www.creativespad.com/free-divi-layouts/

如果您将鼠标悬停在每个网格上，图像将缓慢滚动到顶部并停在那里。

我已经在stackoverflow.com上找到了答案 Auto scroll image taller than container on hover

但我需要的是没有Javascript的答案。在上面的链接中有一个非JavaScript的答案，但不知道如何修改它为我的长图像。（见下图）

http://www.creativespad.com/free-divi-layouts/wp-content/uploads/2016/06/mighty.jpg

我不想要javascript因为我使用divi主题，我不知道在哪里放置javascript。

我是新手顺便说一下。非常感谢你帮忙

Answer 1

让我回答你的问题。但首先你需要javascript才能知道图像的高度。要回答“你会滚动多少像素？”的问题。但是我们假设您知道图像高度，或者您将使用相同大小的图像。在这种情况下，解决方案的关键是使用父元素'div'与相对位置和隐藏在溢出子元素'img'与绝对位置， 0顶部像素和过渡属性位于顶部。然后在您的情况下为最高值“图片高度 - 父级高度”的图片添加悬停效果。你可以看到jsfiddle

这是HTML：

.img-wrapper
{
    overflow: hidden;
    position: relative;
    float: left;
    height: 300px;
    width: 400px;
    border:5px solid #BBB;
    border-radius: 5px 5px 5px 5px;
}

.extrem-height-image
{
  position: absolute;
  top: 0;
  width: 400px;
  height: auto;
  transition: top 5s ease-out 0s;
}

.extrem-height-image:hover
{
   top: -300px;
}

<div class="img-wrapper">
    <img class="extrem-height-image" src="http://placehold.it/400x600"/>
</div>

祝你好运

Answer 2

如果要让img自动滚动，则必须设置具有指定宽度和高度的包装器！不必为img本身设置宽度/高度

.img-wrapper{
max-width:80px;
max-height:80px;
overflow:auto;
background:red;
}

<div class="img-wrapper"><img src="http://placehold.it/100x100"></div>

在悬停时自动滚动比容器更高的图像（更高的图像）

2 个答案: