文本溢出的悬停颜色：省略号卡在 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;
}