0

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

<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 或类似的东西，这不是问题。

提前致谢。

4

2 回答 2

0

您的图像看起来像线性渐变，因此您可以尝试使用

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

您可能想要添加对旧浏览器的支持。

于 2012-04-16T23:15:51.350 回答
0

如果你想要阴影，以及变长效果。然后将图像分成三部分。并将您的标记更新为这样的内容

  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"); }
于 2012-04-16T23:06:47.473 回答