html - 如何在图像上的图像上添加鼠标滚动效果

谁能协助我进行以下编码？我正在尝试添加显示器的图像以及显示器中的另一个图像，该图像在鼠标悬停时具有自动滚动效果。我已经从这篇文章尝试了以下内容：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>如果在计算机屏幕上将位置设置为绝对，则两个图像都正确对齐，但是滚动效果将不起作用。如果将其设置为相对，则滚动效果有效，但是图像彼此重叠。请参见此链接：示例：https://webnificent.co.uk/web-design/一个解决方案将不胜感激。 最佳答案 这很奇怪，但是希望这会有所帮助吗？让我知道您是否对此有任何疑问！.computer { position: absolute; top: 5px; width: 540px; z-index: -1;}.computer-empty { overflow: hidden; position: relative; width: 540px;}.computer-screen { overflow: hidden; position: relative; height: 260px; width: 470px; left: 35px; top: 21px;}.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;}.computer-empty img.computer { width: 100%;} <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>在JSFiddle上看到只是一个建议，使用全黑屏幕的计算机屏幕可能会更容易，例如：Imac with Black Screen，因为在我的示例中，我不得不摆弄left，top，width和只是为了使其适合计算机屏幕上的白色空白框。如果您没有适合放置的特定框，则不必担心此问题，只需在屏幕中间按一下动画图像滚动即可！只是一个想法！关于html - 如何在图像上的图像上添加鼠标滚动效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58367956/