CSS按钮悬停和激活移动下方的段落
因此，当我悬停在它上时，我一直在尝试使按钮伸展，并在单击它时具有3D效果。在按钮的末端一切都很好，并且完全按照应有的方式做。问题是...当按钮伸展时，下面的段落也向下移动，当我按下按钮时，段落移动得更远。无论如何，这可以纠正，以便段落的位置保持固定？
.test-button {
background-color:navy;
color:white;
border:none;
cursor:pointer;
padding-top:8px;
padding-bottom:8px;
padding-left:15px;
padding-right:15px;
font-size:18px;
box-shadow:3px 3px 5px rgba(0, 0, 0, 0.5);
transition:padding 0.15s;
}
.test-button:hover {
padding-bottom:18px;
padding-top:18px;
padding-right:25px;
padding-left:25px;
}
.test-button:active {
margin-top:3px;
margin-bottom:3px;
box-shadow:none;
}
So I have been trying to cause the button to stretch when I hover over it and for it to have a 3D effect when I click on it. All is good on the button's end and it does exactly as it should. Problem is...when the button stretches, the paragraph below it also moves down and the paragraph moves even farther down when I press the button. Anyway this can be rectified so the position of the paragraph remains fixed?
.test-button {
background-color:navy;
color:white;
border:none;
cursor:pointer;
padding-top:8px;
padding-bottom:8px;
padding-left:15px;
padding-right:15px;
font-size:18px;
box-shadow:3px 3px 5px rgba(0, 0, 0, 0.5);
transition:padding 0.15s;
}
.test-button:hover {
padding-bottom:18px;
padding-top:18px;
padding-right:25px;
padding-left:25px;
}
.test-button:active {
margin-top:3px;
margin-bottom:3px;
box-shadow:none;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
当您悬停时，您的按钮将从8px顶部和8px底部填充（高度填充16px）到18px Top和18px底部（高度填充36px），这将按下段落。
当您单击它时，触发以下规则，将保留高度填充，因为您仍然会徘徊在它上，但您还将获得3PX顶部和边距区域的3PX底部（额外的6px高度），将段落进一步向下推动再次。
为了使段落在按下这样的高度时不移动，您可以在固定高度的元素中包含按钮，以使段落始终位于此固定元素以下，只要按钮有足够的空间在内部生长它。
When you hover, your button is going from 8px top and 8px bottom padding (16px of height padding) to 18px top and 18px bottom (36px of height padding) which will push down the paragraph.
When you click on it, triggering the :active rule, your height padding will remain because you will still be hovering on it but you will also gain the 3px top and 3px bottom of margin area (additional 6px height), pushing the paragraph further down once again.
For the paragraph to not move when the button grows in height like this, you could contain the button in an element of a fixed height such that the paragraph will always sit below this fixed element, as long as the button has sufficient room to grow within it.
这里有许多解决方案：
其中一个是您可以通过将其定位为绝对的段落元素从HTML的流中删除，但是您必须小心，因为它可能会导致重叠。
second 一个人几乎不会棘手且耗时，您需要了解按钮元素和段落元素的框模型，然后分配值，以免它们中断每个值别人的盒子型号。
第三一个人只会将两个元素包裹到单独的容器中，并将这些容器分配一个高度，以便即使在悬停，边界/桨式，拨片，边距，边缘等之后，都保留在元素的高度内容器。通过这样做，您将确保任何转移的事情都不会发生。这涉及基本数学和框模型研究以实现相同的目标。
我认为第三种选项最适合您的情况。
Many solutions are possible here:
One of them is you can just take the paragraph element out of the flow of HTML by positioning it as absolute but you have to be careful as it might lead to overlapping.
The Second one would be little tricky and time-consuming, you need to understand the box model for both the button element and paragraph element, then assign the values as such, so that they won't interrupt each other's box model.
The Third one would be just wrapping both of the elements into separate containers and assigning those containers a height such that even after hovering, the boundaries/paddings, margins, etc, of elements remain inside the height of the container. By doing this you would make sure that nothing of shifting sort happens. This involves basic maths and box model study to achieve the same.
I think 3rd option would be best for your case.