title: Make an element lose focus in jquery
body: <p>I have a button with class "scrollToTop" that scrolls to the top of the page when clicked on. Here's the js file:</p>
  
  <pre><code>$(document).ready(function(){
  
    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
      if ($(this).scrollTop() &gt; 100) {
          $('.scrollToTop').fadeIn();
      } else {
          $('.scrollToTop').fadeOut();
      }
    });
  
    //Click event to scroll to top
    $('.scrollToTop').click(function(){
      $('html, body').animate({scrollTop : 0},800);
      return false;
    });
  
  
  });
  </code></pre>
  
  <p>So this button also has a :hover property:</p>
  
  <pre><code>.scrollToTop:hover{
    opacity: 1.0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 8px 8px rgba(0,0,0,0.22);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
  </code></pre>
  
  <p>Now, as we all know :hover doesn't work well in mobile devices i.e. 1) You have to click on the button to change the opacity to 1.0 &amp; 2) You have to tap elsewhere to change the opacity back to what it was before (let's say, 0.5).</p>
  
  <p>Here, I'm wanting to simulate the 2nd part. I want to edit the jquery such that when the page is scrolled to the top, scrollToTop automatically loses focus, so that it loses the :hover effect and its opacity automatically returns to 0.5 without the user having to tap elsewhere. I hope I made myself clear. Is this possible? If not, are there other ways to get the same result? Thanks in advance!</p>