CSS On悬停动态宽度背景图像

Question

我正在尝试在我网站的导航上创建鼠标悬停效果。 导航是一个水平栏，里面有几个项目。代码如下;

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About us</a></li>
  <li><a href="#">Our work and portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>

这有一个简单的背景颜色，每个<li>之间是一个边框来分隔项目。现在我想在悬停时给出一个背景图片，虽然我的问题是 - 正如你所看到的 - 每个<li>都有不同的宽度，因为它的内容和我的悬停图像如下;

所以它实际上只是左右两侧的黑色阴影。右侧阴影必须放在<li>的绝对右侧，左侧阴影放在绝对左侧。

有没有办法实现这个目标？如果使用jQuery或类似的东西，这不是问题。

提前致谢。

Answer 1

如果你想要阴影，可变长度效果。然后将图像分成三个部分。并将您的标记更新为此类

1. 左影
2. 中心部分
3. 右影

然后使用以下CSS代码段

li a:hover:before { content: url("image/leftshadow.jpg"); }
li a:hover { background-Image: url("image/center.jpg"); }
li a:hover:after { content: url("image/rightshadow.jpg"); }

Answer 2

您的图片看起来像linear gradient，因此您可以尝试使用

background-image: linear-gradient(to right, #111, #333, #111);

您可能希望添加对旧浏览器的支持。