title: hover color of text-overflow: ellipsis getting stuck in Chrome
body: <p>JSfiddle is <a href="https://jsfiddle.net/mkusps/nb5Lh6cw/9/" rel="nofollow noreferrer">https://jsfiddle.net/mkusps/nb5Lh6cw/9/</a> The html + scss is:</p>
  
  <pre><code>&lt;div v-else class="outter"&gt;
    &lt;a href="#" class="inner"&gt;
      A long string text that will overflow
    &lt;/a&gt;
  &lt;/div&gt;
  
  .inner {
    color: green;
    &amp;:hover {
      color: red;
    }
  }
  
  .outter { 
    color: green;
    max-width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    &amp;:hover {
      color: red;
    }
  }
  </code></pre>
  
  <p>This only happens in Chrome and Safari, in Firefox things work as I would expect. </p>
  
  <p>If you hover over the link text, the color of the text and the ellipsis changes, as expected. However, if you then move the mouse over to the ellipsis the link text color changes as if the hover was no longer there, while the ellipsis stay in the hover color. Then sometimes when moving the mouse off the ellipsis, the ellipsis stay stuck in a hover color state.</p>
  
  <p>In the Chrome inspector panel the color shows as expected, and if I resize the browser the ellipsis change color to the non-hover color.</p>
  
  <p>I am expecting the text and ellipsis to always have the same color, and to only show the hover color when the mouse is actually hovering the text/ellipsis.</p>