active div overlay

by as541986

HTML

<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>

<div class="active"></div>

CSS

.slide {
    width:19%;
    margin-left:1%;
    min-height: 100px;
    float:left;
    background-color:orange;
    border:5px solid gray;
    box-sizing: border-box;
}
.active {
    position:relative;
    width:19%;
    min-height: 100px;
    background-color:blue;
    border:5px solid gray;
    box-sizing: border-box;
    display:none;
}

JavaScript

$(".slide")
    .mouseenter(function (e) {
    $(this).css("background-color", "red");
    offset = $(this).offset();

    console.log("selected top = " + offset.top + " selected left = " + offset.left);
  

    var active = $(".active");
    active.show(); //show the div first and then set the offset
    active.offset({
        top:  offset.top,
        left: offset.left
    });

   

    console.log("active top = " + active.offset().top + " active left = " + active.offset().left);
    
})
    .mouseleave(function (e) {
    $(this).css("background-color", "orange");
    $(".active").hide();
});