滑动菜单背景模糊

Question

我创建了一个具有模糊背景的幻灯片菜单，当它只是静态图像时可以正常工作，但是与幻灯片放映一起使用时，它将显示错误的图像。

请参阅随附的小提琴http://jsfiddle.net/H863X/2/

当您单击红色框时，菜单将滑出并且菜单背景将变得模糊，这是因为它是从id＃hero-container继承的图像，并添加了模糊效果。

现在，如果您单击此小提琴http://jsfiddle.net/H863X/1/

您会注意到该图像已被替换为黑色图像，但是如果单击红色按钮，则幻灯片仍将显示原始图像，这是因为该图像仍从ID＃hero-container继承图像，请参见以下代码用于CSS中的图片链接。

#hero-container {
    background: url(http://2.bp.blogspot.com/-LwilPQw9Zc0/Unzm09oXDxI/AAAAAAAAHwo/30a7ZqSp3jE/s1600/blur-static+.jpg) no-repeat 50% fixed;
    background-size: cover;
}

我需要幻灯片来显示列表项中的图像，即黑色图像，请参见下面的CSS。

.hero li:nth-child(1) span { 
    background-image: url('http://dummyimage.com/600x400/000/fff.jpg');
}

这有可能吗，您可以举例说明小提琴吗？

Answer 1

您可以添加以下代码以在单击触发元素时更改背景：

 $('#hero-container').css('background-image','url(http://dummyimage.com/600x400/000/fff.jpg)');