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

Answer 2

的dragover事件觸發CONSTA當你拖着，所以我不是那種解決方案的粉絲。我已經寫了一個名爲Dragster的小庫，它使我能夠更好地發現事件enter & leave事件。