title: onClick event on element on Mobile device hover state is still applied
body: <p>I can't seem to find anyone with this same issue online with React, unless I've been searching for the wrong thing?</p>
  <p>I have a button (anchor tag) that has an <code>onClick</code> event. When the <code>onClick</code> event is triggered it calls a <code>loadMore()</code> function that makes an API call and updates some state.</p>
  <p>However on a mobile device (not mobile resolution on desktop!) when I click the button, the <code>onClick</code> event works and returns what is expected, <em>however</em> it applies a <strong>hover</strong> state on the button. For the button hover state I have a background color applied</p>
  <p>The hover state will stick until I click away anywhere else on the screen. So the background color sticks until I click away.</p>
  <p>Now, this isn't exactly desirable. Why is this happening, and how did I prevent it?</p>
  <h3>Here is my <code>Button</code> Component</h3>
  <pre><code>const Button = props =&gt; {
    const buttonDisabledClass = props.disabled ? &quot;Button--disabled &quot; : &quot;&quot;;
    const hiddenClass = props.hidden ? &quot;Button--hidden &quot; : &quot;&quot;;
    const modifierClass = props.modifier ? props.modifier : &quot;&quot;;
  
    return (
      &lt;&gt;
        &lt;a
          onClick={!props.disabled ? props.onClick : undefined}
          className={
            &quot;Button &quot; + buttonDisabledClass + hiddenClass + modifierClass
          }
        &gt;
          {props.children}
          {props.buttonText ? (
            &lt;span
              className={`Button-text ${
                props.buttonMobileText ? &quot;Button-desktopText&quot; : &quot;&quot;
              }`}
            &gt;
              {props.buttonText}
            &lt;/span&gt;
          ) : null}
          {props.buttonMobileText ? (
            &lt;span className=&quot;Button-mobileText&quot;&gt;{props.buttonMobileText}&lt;/span&gt;
          ) : null}
        &lt;/a&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <h3>Here is the parent component</h3>
  <p>The parent component imports the <code>Button</code> component and has the function that makes the API request (just have a simulated one here as an example)</p>
  <pre><code>function App() {
    const [number, setNumber] = useState(0);
  
    /*simulate http request*/
    const ttl = 500;
    const loadMore = () =&gt; {
      const timeout = setTimeout(() =&gt; {
        setNumber(number + 1);
      }, ttl);
      return () =&gt; {
        clearTimeout(timeout);
      };
    };
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        {number}
        &lt;Button
          key={&quot;loadMoreBtn&quot;}
          modifier=&quot;Button--loadMore Button--Inline&quot;
          onClick={() =&gt; loadMore()}
        &gt;
          Load More
        &lt;/Button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>So, how can I make it so a click on a mobile device does not register hover but still have the hover working on a desktop device as it currently is?</p>
  <p>I have a <a href="https://codesandbox.io/s/9zlvnzmpzr" rel="nofollow noreferrer">CODESANDBOX</a> if you wish to test it out for yourself</p>
  <p>Here is a <a href="https://9zlvnzmpzr.codesandbox.io/" rel="nofollow noreferrer">link</a> for you to test on your mobile device.</p>
  <p>The button is orange by default, and grey on hover. On mobile, this is what happens when you click...<a href="https://i.stack.imgur.com/gh854.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gh854.png" alt="enter image description here" /></a></p>
  <p>Any help would be greatly appreciated!</p>