jquery - 当上方图像div上的图像悬停时，如何更改标题div下的背景图像？

我有这些称为“ columns”的div块，其中每个列div包含单独的两个div（顶部和底部）-一个div用于“图像占位符”，另一个div用于“标题”。现在，当我将鼠标悬停在占位符div上的图像上时，我希望将触发操作应用于该图像，然后它还将更改标题div上的背景图像。字幕div在CSS中应用了背景图片精灵，其中“活动”状态的位置为0,0，“悬停状态”的位置为底部。

问题是我编写并尝试过的Jquery代码不起作用：

$('.products2 .thumbnail .holder .image a').bind('mouseover', function(){ $('.products2 .thumbnail .holder .caption').css("background-position", "0 -91px");});

这是HTML标记：

<div class="products2">
      <div class="thumbnail" >
           <div class="holder">
              <div class="image"><a href="?page_id=185"><img src="<?php echo get_bloginfo('template_directory'); ?>/images/embellishments-image.jpg" alt="Embellishments" width="253" height="318"/></a></div>
              <div class="caption"><a href="?page_id=185">Embellishments</a></div>
          </div>
      </div>
 </div>

这是CSS：

.page-wrapper .products2 .thumbnail .caption{
    width:253px; height:86px; background: url(images/thumb-caption-sprite.jpg) no-repeat;
    color: #426e94; text-align: center;font-size:25px; text-decoration: none; font: 22px 'LiberationSerifRegular', Arial, sans-serif; padding-top:5px; outline: none; position: relative;z-index:2;position: absolute;display: table;

}

.page-wrapper .products2 .thumbnail .caption .hover{
    background: url(images/thumb-caption-sprite.jpg) no-repeat;
    background-position: 0 -91px;
    display:block;
    opacity: 0; z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;color: #FFFFFF;text-shadow: none;
}

.page-wrapper .products2 .thumbnail .caption:hover{
    width:253px; height:86px; background: url(images/thumb-caption-sprite.jpg) no-repeat; color: #FFFFFF;
    background-position: 0 -91px;text-shadow: none;
}

最佳答案

请注意，我完全了解您想要什么，但是如果我没有记错的话：

.image:hover + .caption
{
    background-position: 0 -91px;
}

如果我错了，请提个小提琴。

关于jquery - 当上方图像div上的图像悬停时，如何更改标题div下的背景图像？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10055504/