鼠标悬停按钮后图标不显示的CSS问题求助

问题根源 #

你的CSS选择器逻辑错误。当前代码里#submit-btn:hover .fa-hand-point-left是在寻找按钮内部的子元素，但实际图标是和按钮平级的兄弟元素，不在按钮标签范围内，所以这个选择器匹配不到任何元素，图标自然无法显示。

修复方案 #

给你几种简单的解决办法，按需选择：

方法1：用CSS :has()选择器（推荐，无需修改HTML结构） #

:has()是现代浏览器支持的新选择器，能直接选中包含hover状态按钮的父容器，进而控制内部图标显示：

#submit-btn {
  padding: 15px 50px;
  background-color: whitesmoke;
  color: #333;
  border: none;
  font-weight: 700;
  transition: background-color .3s;
}

#submit-btn:hover {
  background-color: #870F02;
  color: whitesmoke;
  box-shadow: 10px 10px 8px #62F0AA;
}

.fa-hand-point-right,
.fa-hand-point-left {
  display: none;
}

/* 当按钮hover时，显示父容器内的两个图标 */
.submit-input:has(#submit-btn:hover) .fa-hand-point-right,
.submit-input:has(#submit-btn:hover) .fa-hand-point-left {
  display: block;
}

方法2：兄弟选择器+父容器hover（兼容旧浏览器） #

如果需要兼容不支持:has()的老浏览器，可以采用这个方案：

#submit-btn {
  padding: 15px 50px;
  background-color: whitesmoke;
  color: #333;
  border: none;
  font-weight: 700;
  transition: background-color .3s;
}

#submit-btn:hover {
  background-color: #870F02;
  color: whitesmoke;
  box-shadow: 10px 10px 8px #62F0AA;
}

.fa-hand-point-right,
.fa-hand-point-left {
  display: none;
}

/* 显示按钮右侧的图标（按钮的下一个兄弟元素） */
#submit-btn:hover ~ .fa-hand-point-left {
  display: block;
}
/* 鼠标悬停按钮或父容器时，显示左侧图标 */
.submit-input:hover .fa-hand-point-right {
  display: block;
}

注：此方案的小瑕疵是鼠标移到父容器空白区域时，左侧图标也会显示，但基本满足核心需求。

备选：JavaScript方案（兼容所有浏览器） #

如果以上CSS方案都不适用，可通过JS监听按钮的鼠标事件实现：

const btn = document.getElementById('submit-btn');
const rightIcon = document.querySelector('.fa-hand-point-right');
const leftIcon = document.querySelector('.fa-hand-point-left');

btn.addEventListener('mouseenter', () => {
  rightIcon.style.display = 'block';
  leftIcon.style.display = 'block';
});

btn.addEventListener('mouseleave', () => {
  rightIcon.style.display = 'none';
  leftIcon.style.display = 'none';
});

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