[英]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.