dragenter和dragleave上的颜色变化不起作用jquery

Question

当拖动和输入<div class="upload-cont">颜色从边框和文本的灰色到黑色完美变化时,当它<span class="add-text">变为灰色时,它会变回灰色.

CSS:

.upload-cont{
    cursor:pointer;
    margin-left:130px;
    display:inline-block;
    border:2px dashed #a8a8a8;
    max-width:220px;
    max-height:180px;
    min-width:220px;
    min-height:180px;
    position:relative;
    border-radius:3px;
}
.add-text{
    display:block;
    font-size:10px;
    font-weight:bold;
    color:#999;
    word-wrap:break-word;
    text-align:center;
    width:100px;
    top:37%;
    left:25%;
    position:absolute;
}
.add-text:hover{ color:black; }

HTML:

<div class="upload-cont">
    <span class="add-text">
        Click to add or<br/>
        Drag and drop image here
    </span>
</div>

jQuery的:

$(document).ready(function () {
    $(".upload-cont,.add-text").on('dragenter', function (e) {
        $(".upload-cont").css({
            "border": "2px dashed black"
        });
        $(".add-text").css({
            "color": "black"
        });
    });
    $(".upload-cont").on('dragleave', function (e) {
        $(".upload-cont").css("border", "2px dashed #a8a8a8");
        $(".add-text").css({
            "color": "#a8a8a8"
        });
    });
});

进入时,如何保持边框和文字的黑色 <span class="add-text">

检查这个jsfiddle: http ://jsfiddle.net/rpABs/

提前致谢

Answer 1

输入子元素时使用dragover而不是dragenter自dragleave触发

$(".upload-cont,.add-text").on('dragover', function (e) {
    $(".upload-cont").css({
        "border": "2px dashed black"
    });
    $(".add-text").css({
        "color": "black"
    });
});
$(".upload-cont").on('dragleave', function (e) {
    $(".upload-cont").css("border", "2px dashed #a8a8a8");
    $(".add-text").css({
        "color": "#a8a8a8"
    });
});

DEMO