div不透明度为.5,将mouseenter上的动画设置为1,但我希望文本始终保持不透明度1

时间:2011-09-08 19:34:15

标签: jquery css opacity

我对在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;
}

0 个答案:

没有答案