让div在悬停时展开

-2

基本上，我只是想创建一个“相对”的我正在盘旋的div比例。我尝试了以下，但输出是一场灾难。帮助会被蒙蔽！让div在悬停时展开

.item 
{ 
    position: relative; 
    display: inline-block; 
    width: 20%; 
    height: 100px; 
    background-color: green; 
    margin-right: 10px; 
    transition: all 0.4s ease; 
} 

.item:hover 
{ 
    transform: scale(1.5); 
    margin-right: 40px; 
    margin-left: 26px; 
}

期望的解决方案：

enter image description here *重要的是，我目前有还在继续缩放项之间填充的问题。

链接：JsFiddle

来源

2015-07-21 Bilal075

JSFiddle看起来不错，根据给定的图片！ – iamhimadri

@ user3135227它的确如此，但我希望填充相对移动。所以我没有必要留下保证金。 – Bilal075

试试这个： http://stackoverflow.com/questions/18833437/maintain-padding-when-scaling-image-inside-fixed-size-container – Augustmae

只要调整你的利润，这似乎运作良好：

.item:hover 
{ 
    transform: scale(1.5); 
    margin-right: 54px; 
    margin-left: 44px; 
}

来源

2015-07-21 19:49:07 CamJohnson26

我想填充移动相对明智。因此，不要给出保证金余额/保证金正确的价值。 – Bilal075

你想让它垂直缩放但不水平？或者你想要其他元素缩小？对不起，没有理解该图 – CamJohnson26

我想要的效果，它目前有，并保持填充以及。因此，无论何时我将鼠标悬停在某个项目上，它都会同时缩放项目和填充（无需调整页边距/页边距权限值）。 – Bilal075

问题与其他两个答案是，他们只用静态视正常工作。这里有一个更动态的解决方案：

.item 
{ 
    position: relative; 
    display: inline-block; 
    width: 20%; 
    height: 100px; 
    background-color: green; 
    margin-right: 10px; 
    transition: all 0.4s ease; 
} 

.item:hover 
{ 
    transform: scale(1.5); 
    margin-right: 6%; /* fallback for ancient browsers that don't support calc() */ 
    margin-right: calc(5% + 10px); 
    margin-left: 5%; 
}

jsfiddle

来源

2015-07-21 19:54:31

是否可以让填充相对移动，而无需计算/设置边距右/边距左值？ – Bilal075

这个填充_does_相对移动 - 它是页面宽度的5％，所以它会在更宽的页面上填充更多。如果您在jsfiddle中调整输出区域的宽度，则会看到它在所有宽度下都能正确显示。 –

这是真的，但我仍然给左/右边距一个值。这不是我想要做的 – Bilal075

-1

我不认为你可以做到这一点了设定值。

来源

2015-07-21 19:56:25 Augustmae

让div在悬停时展开

回答

相关问题