由于触摸输入不会触发:hover伪类，因此需要使用JavaScript来实现悬浮效果。可以通过监听鼠标事件来实现悬浮效果。

HTML代码示例：

悬浮按钮

CSS代码示例：

.hover-button {
  background-color: transparent;
  border: 2px solid #000;
  color: #000;
  padding: 10px;
  transition: all 0.3s ease;
}

.hover-button:hover {
  background-color: #000;
  color: #fff;
}

JavaScript代码示例：

const hoverButtons = document.querySelectorAll('.hover-button');
hoverButtons.forEach(button => {
  button.addEventListener('mouseenter', () => {
    button.classList.add('hovered');
  });
  button.addEventListener('mouseleave', () => {
    button.classList.remove('hovered');
  });
});

在JavaScript中，我们通过querySelectorAll方法获取所有悬浮按钮的DOM元素，并通过forEach方法遍历每个按钮。然后，我们为每个按钮添加mouseenter和mouseleave事件的监听器。当鼠标进入按钮时，我们将其样式类中添加'hovered'类，当鼠标离开按钮时，我们将其样式类中移除'hovered'类。最后，在CSS中，我们添加.hovered类的样式来定义悬浮效果。