CSS悬停动态宽度背景图像

我正在尝试在我的网站上的导航上创建鼠标悬停效果。导航是一个带有几个项目的单杠。代码如下;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>

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

hover effect

所以它实际上只是在左，右一个黑色的影子。必须将右侧阴影放置在<li>的绝对右侧，并将左侧阴影放在绝对左侧。

有什么办法可以达到这个目的吗？如果使用jQuery或类似的东西，这不是问题。

在此先感谢。

来源

2012-04-16 Roel

这将有助于查看应用的样式。 – steveax 2012-04-16 23:05:58

如果你想要阴影和变长效果。然后将图像分成三部分。和更新您的标记是这样的

左阴影
中心部分
右阴影

然后使用下面的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-16 23:06:47 Starx

经典[滑动门]（http://www.alistapart.com/articles/slidingdoors/）技术只需要2个图像，并已被许多人精炼[只能使用一个图像]（http://kailoon.com/css - 仅滑动门使用1-图像/） – steveax 2012-04-16 23:10:03

链接是正确的，因为OP仅将图像用于'：hover'，但[这里是第二部分]（http://www.alistapart.com/articles/slidingdoors2 /），它涵盖了结合'：hover'和默认图像的ALA。 – steveax 2012-04-16 23:30:04

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

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

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

来源

2012-04-16 23:15:51 Neil

CSS悬停动态宽度背景图像

回答

相关问题