怎么实现当鼠标离开黑色区域的时候黑色部分消失，这种效果啊？

Question

鼠标jsjqueryfunction图片

Answer 1

$('p').hover(function () {
            o = $(this).prev();
            o.fadeIn();
             });换成hover试试。

Answer 2

看看我弄的效果，图片用的是下面的那个，宽度和高度都是200px，如果换成你的图片的话，最好改下.picture的属性
阴影是用CSS实现的，不是用图片。<style type="text/css">
    *{margin: 0; padding:0;}
    .picture{width: 200px; height: 200px;position: relative; margin-top: 10px;}
    .picture .del{position: absolute;}
    .picture .lay{position: absolute;width: 200px;height: 40px;background-color: #000;bottom: 0;filter: alpha(Opacity=60);opacity: .6; display: none; cursor: pointer;}
</style>
<div class="box">
    <div class="picture">
        <p class="del">
            <img src="./common/images/01.jpg"/>
        </p>
        <p class="lay"></p>
    </div>
    <div class="picture">
        <p class="del">
            <img src="./common/images/01.jpg"/>
        </p>
        <p class="lay"></p>
    </div>
    <div class="picture">
        <p class="del">
            <img src="./common/images/01.jpg"/>
        </p>
        <p class="lay"></p>
    </div>
    <div class="picture">
        <p class="del">
            <img src="./common/images/01.jpg"/>
        </p>
        <p class="lay"></p>
    </div></div>
<script type="text/javascript" src="./common/jquery-1.11.1.min.js"></script>
<script>
    $(".picture").hover(function(){
        var $lay = $(this).find(".lay");
        $lay.stop(false, true).fadeIn();
    }, function(){
        var $lay = $(this).find(".lay");
        $lay.stop(false, true).fadeOut();
    });
</script>