按钮hover触发图片动画失效求助：Replete环境下问题排查

算力阿峰

2026-7-9

问题解决

核心问题分析

选择器无效：你的HTML中<img>位于按钮之前，且按钮被<hint>标签包裹，导致.button:hover + img无法选中目标图片——相邻兄弟选择器(+)仅能选中紧跟在目标元素之后的兄弟元素，而这里图片既不在按钮之后，也不是按钮的直接兄弟。
语法错误：CSS中animation: left 2sl存在笔误，应为2s（结尾的l是多余的）。
动画方案冗余：仅需修改left属性时，使用transition比@keyframes更简洁高效。

修正后的代码

HTML

<!DOCTYPE html>
<html>
  <button class="button" onclick="clicked()">Click me</button>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Question_mark_%28black%29.svg/800px-Question_mark_%28black%29.svg.png">
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Exo+2&family=Kablammo&family=Rubik+80s+Fade&family=Space+Mono&family=VT323&display=swap');

.button {
  background-color: #27282c;
  color: white;
  border: 1px solid white;
  padding: 10px;
  font-size: 1em;
  font-family: 'Exo 2';
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 4px;
}

img {
  position: absolute;
  top: 69%;
  left: 55%;
  width: 30px;
  height: 30px;
  opacity: 1;
  transition: left 1s ease; /* 明确指定过渡属性，提升性能 */
}

.button:hover ~ img {
  left: 53%; /* 调整此值控制移动方向（比如53%是向左靠近按钮，57%是向右） */
}