Question

我们正在使用应用程序构建产品构建器，该应用程序只允许我们更改css而不是其他内容。需要div内的预览图像在悬停时放大并可从一个角落滚动到另一个角落，以便向客户显示产品的所有细节。我已经添加了css以使其在悬停时扩展但无法滚动。任何帮助将不胜感激。

.shappify_product_builder .option_image .spritespin-stage {
    width: 500px !important;
    height: 500px !important;
    background-size: 100% !important;
    margin-left: 40px;
}
.spritespin-stage { transition: all .2s ease-in-out; }
.spritespin-stage:hover { transform: scale(2); overflow: auto; }

以下是html。我需要带有.spritespin阶段的div中的图像来放大并可滚动。

<div id="option_image" class="rotationViewer option_image spritespin-instance" style="max-height: 544px; -webkit-user-select: none; overflow: hidden; position: relative; width: 3600px; height: 3600px;" unselectable="on">
    <div class="spritespin-stage" style="width: 3600px; height: 3600px; top: 0px; left: 0px; position: absolute; display: block; background-image: url(&quot;//www.shappify-cdn.com/images/78432/86058914/001_first-screen.png&quot;); background-size: 500px 500px; background-position: 0px 0px; background-repeat: no-repeat;"></div>
    <div class="spritespin-preload" style="width: 3600px; height: 3600px; top: 0px; left: 0px; position: absolute; display: none;"></div>
</div>

Answer 1

包含.spritespin-stage:hover的父div需要overflow: auto。父级还需要固定的宽度和高度，因此当div内部放大时，滚动条会生成而不是随.spritespin-stage增长。

Answer 2

检查以下示例是否有助于解决问题。

https://jsfiddle.net/6wy87p8e/2/

＆＃13;

.spritespin-stage {
width: 100px !important;
height: 100px !important;
background-size: 100% !important;
background-color:red;
transition: all .2s ease-in-out; 
transform: scale(1);
margin:0;
}
.option_image{overflow:hidden; width:100px;height:100px}
.option_image:hover{overflow:scroll;}
.option_image:hover .spritespin-stage{margin:50px 0 0 50px;transform: scale(2);}


css css3

＆＃13;

<div class="shappify_product_builder">
  <div class="option_image">
  <p class="spritespin-stage">Test content</p>
  </div>
</div>

＆＃13;

Answer 3

＆＃13;

<div id="option_image" class="rotationViewer option_image spritespin-instance" style="max-height: 544px; -webkit-user-select: none; overflow: hidden; position: relative; width: 3600px; height: 3600px;" unselectable="on">
    <div class="spritespin-stage" style="width: 3600px; height: 3600px; top: 0px; left: 0px; position: absolute; display: block; background-image: url(&quot;//www.shappify-cdn.com/images/78432/86058914/001_first-screen.png&quot;); background-size: 500px 500px; background-position: 0px 0px; background-repeat: no-repeat;"></div>
    <div class="spritespin-preload" style="width: 3600px; height: 3600px; top: 0px; left: 0px; position: absolute; display: none;"></div>
</div>

＆＃13;

需要在没有javascript的情况下使用css进行div缩放和滚动

3 个答案: