悬停时背景位置发生变化

Question

我一直有CSS问题。我有一个div，包括一个图像的div，一个包含链接的div和一个包含描述的div，分别命名为sidebar，sbpic，lks和desc。

对于图像，这是我目前的代码：

#sbpic {
background-image:url('{image:Sidebar1}');
background-attachment:fixed;
background-repeat:repeat;
background-position:0px 50px;
position:fixed;
width:230px;
height:130px;
margin:10px 0px 0px -25px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;  
}

#sidebar:hover #sbpic {
margin-top:305px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;  
}

它可以在预览中正常工作，因为您可以看到here

但是当我打开我的网站时，结果是here

我尝试过使用#sbpic：hover并改变那里的背景位置，我也尝试改变#sidebar上的背景位置：hover #sbpic。第一个只有当我在图片上方盘旋时才会起作用，后者会在到达底部时使图片偏离50px。

有什么建议吗？