css - 文本溢出的悬停颜色 : ellipsis getting stuck in Chrome

Question

JSfiddle 是 https://jsfiddle.net/mkusps/nb5Lh6cw/9/ html + scss 是:

<div v-else class="outter">
  <a href="#" class="inner">
    A long string text that will overflow
  </a>
</div>

.inner {
  color: green;
  &:hover {
    color: red;
  }
}

.outter { 
  color: green;
  max-width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  &:hover {
    color: red;
  }
}

这只发生在 Chrome 和 Safari 中，在 Firefox 中一切如我所料。

如果将鼠标悬停在链接文本上，文本和省略号的颜色会按预期发生变化。但是，如果您随后将鼠标移到省略号上，链接文本颜色会发生变化，就像悬停不再存在一样，而省略号仍保持悬停颜色。然后有时将鼠标移离省略号时，省略号会停留在悬停颜色状态。

在 Chrome 检查器面板中，颜色按预期显示，如果我调整浏览器的大小，省略号的颜色会变为非悬停颜色。

我希望文本和省略号始终具有相同的颜色，并且仅在鼠标实际悬停在文本/省略号上时才显示悬停颜色。

Answer 1

糟糕，看起来我的 CSS 是错误的。

解决办法是把.inner css改成

.inner {
  color: inherit;
}