Question

When dragging and entering the <div class="upload-cont"> the color changes perfectly from gray to black of border and text and when it comes to the <span class="add-text"> it changes back to gray.

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"
        });
    });
});

What can i do to remain the black color for the border and text when entering <span class="add-text">

Check this jsfiddle: http://jsfiddle.net/rpABs/

Thanks in advance

Answer 1

Use dragover instead of dragenter since dragleave fires when you enter child elements

$(".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