Question

我想创建一个框（div），其中填充在悬停时增加。实际上它是一个全屏按钮。

我试过了：

.full_screen {
width:20px;
height:20px;
background-color:rgba(0,0,0,0.8);
border-radius:2px;
position:absolute;
transition:all 0.6s; //important property
left:82%;
}

.full_screen:hover {
padding-top:10px; //!important property
padding-right:10px; //important property
}

我从顶部和右边增加了填充，但它没有用。

Answer 1

来自https://developer.mozilla.org/en-US/docs/Web/CSS/left：

对于绝对定位的元素（位置：绝对或位置：固定的元素），[left属性]指定元素的左边缘与其包含块的左边缘之间的距离。 / p>

left:82%;

CSS将此解释为“将此框的左边缘保持在包含块的左边缘82％”。因此，当尺寸因填充而发生变化时，左边缘会保持原位。

Demo, using the code in the question

你想要的是保持正确的边缘。为此，您可以在CSS中指定right而不是left。

right:18%;

Demo with the above property

从盒子的边缘过渡填充

1 个答案: