Javascript 动态悬停宽度背景图像上的CSS

我正在尝试在我的网站上的导航上创建鼠标悬停效果。 导航是一个水平条，其中包含一些项目。代码如下

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

它有一个普通的背景色，每个颜色之间有一个边框来分隔项目。现在我想给出一个悬停的背景图像，尽管我的问题是——正如你所看到的——每个悬停都有不同的宽度，因为它的内容，我的悬停图像如下

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

有没有办法做到这一点？如果是jQuery或类似的东西，这不是问题

---

提前感谢。

如果您想要阴影和可变长度效果。然后将图像分成三部分。并将您的标记更新为如下内容

左阴影 中部 右阴影 然后使用下面的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"); }

您的图像看起来像一个，因此您可以尝试使用

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

---

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

查看应用的样式会很有帮助。经典技术只需要2张图像，并且经过许多改进，以确保链接正确，因为OP仅使用：hover的图像，但在ALA中，它涵盖了：hover和默认图像的组合。