滑动菜单有模糊的背景

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)');