鼠标悬停按钮时如何实现span元素底部内边距增大？

嘿，我来帮你搞定这个悬停效果！其实有两种简单的方法可以实现，先给你推荐最省心的纯CSS方案，再补全你尝试的JS写法~

方法一：纯CSS实现（首推） #

完全不需要JavaScript，直接用CSS的:hover伪类结合后代选择器就能搞定，代码简洁还易维护：

/* 当按钮被鼠标悬停时，选中内部的span设置底部内边距 */
#myBtn:hover #move {
  padding-bottom: 13px;
  /* 加个过渡动画，让变化更平滑自然 */
  transition: padding-bottom 0.3s ease;
}

如果想要过渡效果更丝滑，建议给span的初始状态也设置一个padding-bottom值，这样过渡会有明确的起止：

#move {
  padding-bottom: 0; /* 初始内边距，根据你的实际需求调整 */
  transition: padding-bottom 0.3s ease;
}

方法二：JavaScript实现（补全你的原有方案） #

如果你更倾向用JS来控制样式，需要确保事件绑定完整，还要记得在鼠标移出时恢复原样式（不然悬停后的样式会一直保留哦）：

先保留你的CSS类：

.set {
  padding-bottom: 13px;
  transition: padding-bottom 0.3s ease;
}

然后补全你的JavaScript代码：

window.onload = function() {
  const btn = document.getElementById("myBtn");
  const targetSpan = document.getElementById("move");
  
  // 鼠标悬停时给span添加类
  btn.onmouseover = function() {
    targetSpan.classList.add("set");
  };
  
  // 鼠标移出时移除类，恢复初始样式
  btn.onmouseout = function() {
    targetSpan.classList.remove("set");
  };
};

两种方法都能实现你要的效果，优先推荐纯CSS方案，毕竟不需要额外的JS逻辑，浏览器原生支持的性能也更好~

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