需要使用div來縮放尺寸，並且使用css而不使用javascript懸停滾動

我們正在構建一款產品生成器，該應用只允許我們更改css而沒有其他任何東西。需要div內的預覽圖像放大懸停並可從一角到另一角滾動，以向客戶展示產品的所有細節。我已經添加了CSS來使其在懸停時擴大，但無法滾動。任何幫助將不勝感激。需要使用div來縮放尺寸，並且使用css而不使用javascript懸停滾動

.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>

來源

2016-08-25 Yash Mistry

你有這個例子的HTML？ – mhatch

檢查下面的例子是否有助於解決問題。

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

.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

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

來源

2016-08-25 19:13:47 Manivannan

感謝Manivannan的快速回復。當我運行它時，代碼在這裏工作，但它不適用於我正在使用的應用程序。我使用上面的問題附加了開發工具中的html。也許它會讓你更好地瞭解頁面的結構。 –

請將代碼添加到任何代碼snipet jsfiddle或stackoverflow本機代碼snipet進行調試 – Manivannan

我添加了上面這個div的html。 div和圖像在加載時爲500x500px，我們想要將它們放在500x500px div內懸停並能夠滾動查看細節。 –

含有.spritespin-stage:hover需要父div來有overflow: auto。父母也需要一個固定的寬度和高度，所以當div裏面放大時，滾動條產生，而不是與.spritespin-stage增長。

來源

2016-08-25 18:54:02

感謝ms-nitrogen的快速回復。當我運行它時，代碼在這裏工作，但它不適用於我正在使用的應用程序。我附上上面的html與問題。也許它會讓你更好地瞭解頁面的結構。 –

我在上面添加了這個div的html。 div和圖像在加載時爲500x500px，我們想要將它們放在500x500px div內懸停並能夠滾動查看細節。請參閱視頻，瞭解網頁的設置方式，縮放方式，但整個頁面會滾動而不僅僅是圖像。 [link]（dropbox.com/s/gamlib8ptauajo8/code%20and%20preview.mov?dl=0） –

它現在有效。謝謝你的幫助。 –

<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>

來源

2017-02-14 07:23:18 liban

需要使用div來縮放尺寸，並且使用css而不使用javascript懸停滾動

回答

相關問題