title: Cannot change width of a custom scrollbar on hover using ::-webkit-scrollbar:hover
body: <p>I'm trying to make a custom scrollbar to change its width when cursor is getting close to it. (it's for an Electron app, so it only need to work in Chrome).</p>
  <p>I don't know how to trigger the width change while the cursor is still a few px away from it, so I'm just specifying a different width on <code>:hover</code>:</p>
  <h3>Code</h3>
  <pre><code>::-webkit-scrollbar {    
    background-color: lightGrey;
    width: 18px;
  } 
  
  
  ::-webkit-scrollbar-thumb:hover {
    width: 30px;
    background-color: red;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: grey;
  }
  </code></pre>
  <p>All the code (with Vue framework):
  <a href="https://codepen.io/anon/pen/eVYQvq" rel="nofollow noreferrer">https://codepen.io/anon/pen/eVYQvq</a></p>
  <p>Here's just a simple HTML version:
  <a href="https://codepen.io/anon/pen/EQxGZX" rel="nofollow noreferrer">https://codepen.io/anon/pen/EQxGZX</a></p>
  <hr />
  <h2>Problem</h2>
  <p>As you can see from the codepen, it changes color on hover but not the width.</p>