Непрозрачность div на .5, анимация при наведении мыши на 1, но я хочу, чтобы текст всегда оставался непрозрачным 1 - PullRequest
Новая
       5

Непрозрачность div на .5, анимация при наведении мыши на 1, но я хочу, чтобы текст всегда оставался непрозрачным 1

0 голосов
/ 08 сентября 2011

У меня есть div для изображений, которые увеличиваются с 0,5 до 1 при вводе мыши, и это включает в себя текст. Я хочу, чтобы текст был с непрозрачностью 1, но у делителя позади появляются и исчезают события мыши.

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;
}
...