在移动设备上点击按钮时如何摆脱这些黑暗区域

Question

源代码在这里： https : //codesandbox.io/s/hony-quekr

演示： https : //quekr.csb.app/

该按钮本身是一个span元素。 这是相关的代码片段。

import React, { Component } from "react";
import posed from "react-pose";
import "./Choice.css";

const config = {
  visible: {
    opacity: 1,
    y: 0,
    delay: 100
  },
  hidden: {
    opacity: 0,
    y: 8,
    delay: 200,
    transition: {
      duration: 200
    }
  }
};
const Underline = posed.div(config);

class Choice extends Component {
  constructor() {
    super();
    this.state = {
      isVisible: false
    };
  }

  componentDidMount() {
    this.setState({ isVisible: this.props.visibility });
  }

  componentDidUpdate(prevProps) {
    if (this.props !== prevProps) {
      this.setState({ isVisible: this.props.visibility });
    }
  }

  render() {
    return (
      <span
        className="word"
        onMouseEnter={() => this.props.onMouseEnter()}
        onMouseLeave={() => this.props.onMouseLeave()}
        onClick={() => this.props.onClick()}
      >
        {this.props.name}
        <Underline
          className="underline"
          pose={this.state.isVisible ? "visible" : "hidden"}
        />
      </span>
    );
  }
}

问题在于移动设备，当在移动设备上查看页面时，单击（轻击）按钮时，每个按钮周围都会出现一个暗区。 我已附上一张图片进行演示。

我想摆脱这些黑暗的区域，以便在您点击这些按钮时什么都不会发生，除了下划线显示出来

Answer 1

试试这个CSS：

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none;    
}