我对在mouseenter上从.5到1淡入的图像有div,其中包括文本。我想保持文本的不透明度为1,但是鼠标事件后面的div会淡入和淡出。
jQuery的:
<script type="text/javascript">
$(document).ready(function(){
$('.fade').hover(function() {
$(this).stop().animate({"opacity": 1});
},function() {
$(this).stop().animate({"opacity": .5});
}).css("opacity", 0.5);
});
</script>
HTML:
<div class="image_w_caption">
<div class="image" style="width:250px;height:188px;background:url(images/piers.jpg) no-repeat 0 0;"></div>
<div class="fade" href="javascript:void(0)" onclick="window.open('http://blog.commpro.biz/?p=2788')"></div>
<div class="over_fade"><p>Successful Book Promotion: Grade F; Walking Out of an Interview: Grade F-</p></div>
</div>
的CSS:
.fade{
width:250px;height:188px;
background:url(../images/image_2.png) no-repeat 0 0;
position:relative;
top:-188;
z-index:2;
text-align:left;
cursor:pointer;
}
.fade p{
padding:140px 5px 0 5px;z-index:3;color:white;font-weight:bold;
}
.over_fade p{
padding:140px 5px 0 5px;z-index:4;color:white;font-weight:bold;
}
.image_w_caption{
float:left;width:250px;height:188px;overflow:hidden;margin:3px;
}