[英]How to change the background image on the caption div underneath, when an image on image div above is being hovered?
我有這些稱為“列”的 div 塊,其中每個列 div 包含單獨的兩個 div(頂部和底部)-一個 div 用於“圖像占位符”,另一個 div 用於“標題”。 現在,當我在占位符 div 上的圖像上輸入 hover 時,我希望觸發操作應用於圖像,然后它也會更改標題 div 上的背景圖像。 標題 div 在 CSS 中應用了背景圖像精靈,其中“活動”state 在 0,0 的 position 中,“懸停在底部 position 中的 state。
問題是我編寫並試驗過的 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;
}
如果我錯了,請提供小提琴。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.