鼠标悬停按钮时滑出元素功能实现异常求助（附代码）

嘿，我看你在做鼠标悬停滑出div的效果时卡壳了，先梳理下你代码里的问题，再给你一个能正常运行的完整方案：

你贴的代码片段里有个明显的错误：perspective: 350;这个属性没有带单位，浏览器会直接忽略它，这会导致你想要的3D透视效果完全失效，得改成perspective: 350px;才行。另外你的代码只写到.block .normal的background: ...就截断了，滑出元素的样式和交互逻辑应该是缺失的。

完整可运行代码 #

CSS部分

/** 
 * CSS3 悬停滑出效果
 */ 
body { 
  background: #f06; 
  background: linear-gradient(45deg, #f06, yellow); 
  min-height: 100vh; /* 用vh确保页面占满视口高度 */
  margin: 0;
} 
.block { 
  width: 150px; 
  color: #fff; 
  margin: 30px auto; 
  text-transform: uppercase; 
  text-align: center; 
  font-family: Helvetica; 
  position: relative; 
  perspective: 350px; /* 补上px单位，启用3D透视 */
  cursor: pointer;
} 
.block .normal { 
  background: #2c3e50;
  padding: 15px 0;
  transition: transform 0.3s ease; /* 添加过渡动画 */
}
/* 定义滑出的元素样式 */
.block .slide-out {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #34495e;
  padding: 15px 0;
  /* 初始状态：向上偏移+透明+隐藏 */
  transform: translateY(-20px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease; /* 所有属性变化都添加过渡 */
}
/* 悬停时的交互效果 */
.block:hover .normal {
  transform: translateZ(20px); /* 按钮轻微抬起，增强3D感 */
}
.block:hover .slide-out {
  transform: translateY(0); /* 滑到正常位置 */
  opacity: 1; /* 显示 */
  visibility: visible; /* 恢复可交互状态 */
}

HTML部分

<div class="block">
  <div class="normal">Hover Me</div>
  <div class="slide-out">I Slid Out!</div>
</div>

关键注意点 #

• 单位缺失问题：perspective必须带长度单位（比如px），否则属性无效。
• 滑出元素定位：用绝对定位把滑出元素放在按钮正下方，依赖.block的position: relative作为定位参考。
• 过渡动画：给元素添加transition让滑出效果更平滑，避免突兀的显示/隐藏。
• 初始隐藏逻辑：同时用opacity和visibility是为了让元素隐藏时既看不见，也不会干扰鼠标事件。

内容的提问来源于stack exchange，提问作者Meo Dows