我有这些称为“列”的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;
}
我们应该看到你的精灵图像,看看发生了什么?创建一个jsfiddle示例页面。 – ocanal 2012-04-07 15:13:43