CSS3 过渡不适用于 Display 属性
在 CSS 中,display 属性在定义元素是否可见或隐藏方面起着至关重要的作用。另一方面,过渡可以随着时间的推移实现平滑的视觉变化。但是,尝试将过渡应用于显示设置为无的元素可能会导致意外行为。
解决问题
问题源于显示的性质财产。当元素的显示设置为无时,它将从页面中删除,就好像它从未存在过一样。因此,它无法部分显示或进行过渡。
替代解决方案:使用不透明度
要在悬停时实现所需的淡入淡出效果,请考虑使用不透明度属性。 Opacity 控制元素的透明度,使其逐渐出现或消失。
CSS 解决方案
实现以下 CSS 调整以启用淡入淡出效果:
#header #button:hover > .content { opacity: 1; height: 150px; padding: 8px; } #header #button .content { opacity: 0; height: 0; padding: 0 8px; overflow: hidden; transition: all .3s ease .15s; }
通过结合不透明度和过渡,当鼠标悬停在按钮上时,隐藏的内容会淡入视图。为了简洁起见,省略了跨浏览器兼容性的供应商前缀。
其他注意事项
除了不透明度之外,还可以探索调整高度和填充属性以实现类似的效果
其他资源
以上是为什么当显示设置为'无”时 CSS3 过渡不起作用?的详细内容。更多信息请关注PHP中文网其他相关文章!