【发布时间】:2019-10-13 21:30:17
【问题描述】:
谁能帮助我完成以下编码?我正在尝试在监视器中添加一个监视器图像和另一个图像,该图像对鼠标悬停具有自动滚动效果。
我从这篇文章中尝试了以下内容: How to make image scrolling effect inside other image?
我也在那里发过帖子,然后才注意到如果我有解决方案我应该发帖,所以我重新发布了一个新帖子。
我正在使用的 CSS 代码:
.computer-empty {
overflow: hidden;
position: relative;
width: 540px;
}
.computer-screen {
overflow: hidden;
position: relative;
height: 265px;
width: 480px;
left: 30px;
top: 20px;
}
.screen-landing {
left: 0;
line-height: 0;
position: absolute;
width: 100%;
transition: all 6s;
-o-transition: all 6s;
-ms-transition: all 6s;
-moz-transition: all 6s;
-webkit-transition: all 6s;
}
.screen-landing:hover {
cursor: pointer;
margin-top: -1036px;
}
img {
max-width: 100%;
width: auto;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
.computer-empty img.computer {
width: 100%;
}
我正在使用的 HTML 代码:
<a target="_blank" href="http://www.safidrivingschool.co.uk" class="">
<div class="computer-screen">
<div class="screen-landing">
<img src="http://www.webnificent.co.uk/wp-content/uploads/graphics/safidrivingschool_capture.png" alt="Safi Driving School">
</div>
</div>
<img class="computer" src="http://www.webnificent.co.uk/wp-content/uploads/graphics/apple_montior.png" alt="computer">
</a>
</div>
如果我在 .computer-screen 上将位置设置为绝对位置,两个图像都会正确排列,但滚动效果将不起作用。如果我将其设置为相对,则滚动效果会起作用,但图像会彼此重叠。
查看此链接:示例:https://webnificent.co.uk/web-design/
我们将不胜感激。
【问题讨论】: