Как изменить фоновое изображение на подписи под снизу, когда изображение на изображении div выше завис?

Question

У меня есть эти блоки div, называемые «столбцы», где каждый столбец div содержит отдельные два div (верхний и нижний) - один div для «place place» и другой div для «caption». Теперь я хочу, чтобы действие триггера применимо к изображению, когда я наводил изображение на разделителе-заполнителе, тогда он также изменит фоновое изображение на 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; 
} 

Answer 1

Обратите внимание, что я полностью understrand то, что вы хотите, но если я не ошибаюсь:

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

Если я не прав, пожалуйста, предоставьте скрипку.