如何更改底部圖像div上的圖像在下方的標題div上的背景圖像？

我有這些稱爲「列」的div塊，其中每列div包含單獨的兩個div（頂部和底部） - 一個div用於「圖像佔位符」，另一個div用於「標題」。現在，當我將鼠標懸停在佔位符div上的圖像上時，我想要將觸發器操作應用於圖像，然後它還會更改標題div上的背景圖像。標題div在CSS中應用了背景圖像精靈，其中位置爲0,0的「活動」狀態和位於底部位置的懸停狀態。如何更改底部圖像div上的圖像在下方的標題div上的背景圖像？

問題是我寫和試驗的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; 
}

來源

2012-04-07 user1273897

我們應該看到你的精靈圖像，看看發生了什麼？創建一個jsfiddle示例頁面。 – ocanal 2012-04-07 15:13:43

注意確保我完全understrand你想要什麼，但如果我沒有記錯：

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

如果我錯了，請提供一個小提琴。

來源

2012-04-07 15:34:53 mddw

這就像一個魅力，謝謝！ – user1273897 2012-04-07 16:09:12

如何更改底部圖像div上的圖像在下方的標題div上的背景圖像？

回答

相關問題