SO, Hover Updating

by acbabis

HTML

<div class="container">
    <div class="hoverable inner-div">
        <button class="clickme">Click Me</button><br/>
    </div>
</div>

CSS

.container {
    width: 300px;
    height: 300px;
    margin: 0;
    padding: 0;
    position: relative;
}

.inner-div {
    width: 100%;
    height: 100%;
    padding: 50px 100px;
    text-align: center;
    box-sizing: border-box;
}

.hoverable {
    background-color: blue;
}

.hoverable:hover {
    background-color: green;
}

.cover {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(150, 150, 150, .5);
    padding: 150px 100px 50px 100px;
}

JavaScript

$(function() {
    var $inner = $('<div class="cover inner-div"><br/><br/><br/>Move the mouse now</div>');
    $('.clickme').one('click', function() {
        $('.hoverable').append('<br/><div class="touch">Move the mouse here. Hold Still</div>');
    })
    
    $('.container').on('mouseenter', '.touch', function() {
        setTimeout(function() {
        $('.container').append('<div class="cover inner-div"><br/><br/><br/>Move the mouse now</div>');
        }, 1000);
    });
});