要实现按钮悬停效果不影响按钮内的图标，可以使用CSS的伪元素来实现。以下是一个示例的解决方法：

HTML代码：

  
  按钮

CSS代码：

.hover-button {
  position: relative;
  padding: 10px;
  background-color: #ccc;
  border: none;
  cursor: pointer;
}

.hover-button:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("icon.png");
  background-repeat: no-repeat;
  background-size: cover;
  /* 其他图标样式设置 */
}

在上面的示例中，我们使用了伪元素 ::before 来创建一个覆盖整个按钮的半透明背景。这个伪元素只在按钮悬停时显示，并不会影响按钮内的图标。通过设置 position: relative 的按钮容器，以及给伪元素设置 position: absolute，可以确保伪元素覆盖在按钮上方。

注意，图标的样式设置可以根据实际情况进行调整，上面的示例只是一个简单的示范。