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;
}

悬停文本溢出的颜色：省略号卡在Chrome中

1 个答案: