如何阻止白色像素從其他彩色像素中突出-有解無憂

我正在嘗試創建一種效果，其中一些文本在懸停時從左到右改變顏色。我使用 ::before 創建了一個重復元素，并將所有字體屬性設定為與父元素相同，但只更改顏色。將滑鼠懸停在父元素上時 ::before 轉換為 100% 寬度，并且效果很好。我的問題是白色像素從紅色文本下方“突出”，即使理論上它應該覆寫白色文本。

.nav-btn {
    position: relative;
    padding: 10px 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    color: white;
    font-size: 1.1rem;
    font-weight: 300;
    font-family: 'Raleway';
    white-space: nowrap;
    cursor: pointer;
}

.nav-btn::before {
    content: attr(title);
    position: absolute;
    top: 0;
    left: 0;
    width: 0px;
    height: 100%;
    padding: inherit;
    font-size: inherit;
    font-family: inherit;
    font-weight: 300;
    color: #AF0C15;
    overflow: hidden;
    -webkit-transition: 1s width ease-in-out;
    transition: 1s width ease-in-out;
    z-index: 2;
}

.nav-btn:hover::before {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div className="nav-container">
    <div className="nav-btns-container">
        <Link to={'/'}>
            <button title="Lorem" className="btn nav-btn">
                Lorem
            </button>
        </Link>
        <Link to={'/'}>
            <button title="Lorem" className="btn nav-btn">
                Lorem
            </button>
        </Link>
        <Link to={'/'}>
            <button title="Lorem" className="btn nav-btn">
                Lorem
            </button>
        </Link>
        <Link to={'/'}>
            <button title="Lorem" className="btn nav-btn">
                Lorem
            </button>
        </Link>
    </div>
</div>

如何阻止白色像素從其他彩色像素中突出

uj5u.com熱心網友回復：

我的筆記本電腦上沒有遇到這個問題，但我可以想象當系統試圖在某些螢屏上準確地繪制字符時可能會出現類似舍入錯誤。

一種可能是為偽元素提供與按鈕相同的背景顏色，這樣當它變寬時，它肯定會隱藏下面的字符：

.nav-btn {
  position: relative;
  padding: 10px 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: white;
  font-size: 1.1rem;
  font-size: 10rem;
  font-weight: 300;
  font-family: 'Raleway';
  white-space: nowrap;
  cursor: pointer;
  background: #eeeeee;
  box-sizing: border-box;
}

.nav-btn::before {
  content: attr(title);
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 100%;
  padding: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  color: #AF0C15;
  overflow: hidden;
  -webkit-transition: 1s width ease-in-out;
  transition: 1s width ease-in-out;
  background: #eeeeee;
  background: transparent;
  z-index: 2;
  box-sizing: border-box;
}

.nav-btn:hover::before {
  width: 100%;
}

<button class="nav-btn" title="Lorem">Lorem</button>

注意：使用文本遮罩和在文本下方移動彩色背景可能值得研究一種完全不同的方法。

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459624.html

標籤：css

上一篇：從json中獲取父母，其中javascript中的字串

下一篇：為什么我的:nth-child()選擇器不能與::before一起使用