求助：鼠标悬停按钮时左侧触发动画的实现问题

你好，我在实现用户鼠标悬停按钮时，按钮左侧触发动画的效果过程中遇到了问题。以下是我的相关代码：

HTML代码 #

<div class="block">
  <div class="normal">
    <span>Follow me...</span>
  </div>
  <a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile"> on Twitter </a>
</div>

现有CSS代码（截断版） #

/**
 * CSS3 balancing hover effect
 * Read the tutorial here: http://webbb.be/blog/little-css3-...
 */

我猜你大概率是卡在动画触发逻辑、元素定位或者过渡效果的定义上了。结合你的代码结构，我给你整理了两种常见的左侧悬停动画实现方案，你可以直接套用或者按需调整：

方案1：左侧背景填充动画 #

这种效果是悬停时，按钮左侧的背景色条从左到右铺满整个按钮，适合做高亮提示：

/* 容器基础样式 */
.block {
  display: inline-block;
  position: relative;
  overflow: hidden; /* 隐藏超出容器的动画元素 */
}

/* 按钮主体样式 */
.normal {
  display: inline-block;
  padding: 12px 24px;
  background: #f3f4f6;
  border-radius: 6px;
  position: relative;
  z-index: 1; /* 确保文字在动画层上方 */
  cursor: pointer;
}

/* 左侧动画伪元素 */
.normal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #2563eb; /* 动画条颜色，可自定义 */
  border-radius: 6px 0 0 6px;
  transition: width 0.3s ease; /* 平滑过渡时长，可调整 */
  z-index: -1; /* 把动画层放在文字下方 */
}

/* 悬停触发动画 */
.block:hover .normal::before {
  width: 100%; /* 动画条从左到右铺满 */
}

/* 整合a标签样式（如果需要把链接和按钮绑定） */
.hover {
  display: inline-block;
  margin-left: 8px;
  color: #2563eb;
  text-decoration: none;
  transition: color 0.3s ease;
}

.block:hover .hover {
  color: #1d4ed8;
}

方案2：左侧滑入线条动画 #

这种效果是悬停时一条短线从按钮左侧外部滑入，更偏向轻量提示：

/* 容器基础样式 */
.block {
  display: inline-block;
  position: relative;
}

/* 按钮主体样式 */
.normal {
  display: inline-block;
  padding: 12px 24px;
  background: #f3f4f6;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
}

/* 左侧动画伪元素 */
.normal::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px; /* 初始位置在按钮左侧外部 */
  width: 20px;
  height: 2px;
  background: #2563eb;
  transform: translateY(-50%) translateX(-100%); /* 初始状态向左隐藏 */
  transition: transform 0.3s ease;
}

/* 悬停触发动画 */
.block:hover .normal::before {
  transform: translateY(-50%) translateX(0); /* 滑入按钮左侧 */
}

/* 链接样式优化 */
.hover {
  display: inline-block;
  margin-left: 8px;
  color: #2563eb;
  text-decoration: none;
  transition: color 0.3s ease;
}

.block:hover .hover {
  color: #1d4ed8;
}

小提示 #

如果你的需求是把“Follow me...”和“on Twitter”整合为一个按钮，建议调整HTML结构，把a标签包含整个按钮内容，这样交互更连贯：

<div class="block">
  <a target="_BLANK" href="#" title="My twitter profile">
    <div class="normal">
      <span>Follow me...</span>
    </div>
    <span class="hover">on Twitter</span>
  </a>
</div>

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