Question

I have these div blocks called “columns” where each column div contains separate two divs (top and bottom) – one div for “image placeholder” and another div being for “caption”. Now I want the trigger action to apply to the image when I hover on the image on placeholder div, then it will also change the background image on the caption div. The caption div has background image sprite applied in CSS where the “active” state in position of 0,0, and “hover state in the bottom position.

The problem is the Jquery code I wrote and experimented with, does not work:

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

Here’s the HTML markup:

<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>

Here’s the 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

Note sure I totally understrand what you want, but if I’m not mistaken :

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

If I’m wrong, please provide a fiddle.