HTML CSS部分填充背景

Question

我有一个nav li，在悬停的背景上变为白色。但是，我也希望一部分背景（元素的左侧一部分）在悬停在悬停上为灰色。因此，大约25％的元素需要为灰色，而其他75个元素则需要悬停。

我到目前为止：

nav li:hover{
background-color: white;
}

Answer 1

我将使用直 linear-gradient

nav li:hover{
background: linear-gradient(to right, black 25%,black 25%,#000000 25%,white 25%,white 100%);
}

请参阅小提琴

Answer 2

尝试使用渐变;

类似：

nav li:hover{
    background:-moz-linear-gradient(left, grey 25%, white 75%);
    background:-webkit-linear-gradient(left, grey 25%, white 75%);
    background:-o-linear-gradient(left, grey 25%, white 75%);
    background:-linear-gradient(left, grey 25%, white 75%);
}

<nav>
  <ul>
    <li>Navigation Link 1</li>
    <li>Navigation Link 2</li>
  </ul>
</nav>

另一个可能在这里帮助您的答案