Chrome hover bug

by nkovacs

HTML

<div class="test">
</div>

<div class="overlay" style="display:none">
</div>

CSS

.test {
    background:red;
    width:200px;
    height:200px;
}

.test:hover {
    background:blue;
}

.overlay {
    background:black;
    opacity: 0.5;
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
}

JavaScript

$(function() {

$('.test').click(function() {
    var that = this;
    setTimeout(function() {
        //itt már a this más, ezért kell a that
        $('.overlay').show();
        //hekk, hogy frissüljön a :hover állapot, muszáj azután meghívni, hogy megjelent az overlay
        that.style.display='none';
        that.offsetHeight;
        that.style.display=''; //törli a display-t a style-ból
    },1000);
})

$('.overlay').click(function() {
    $(this).hide();
})

$('.test').mouseover(function() {
    console.log('mouseover');
})

$('.test').mouseout(function() {
    console.log('mouseout');
})


});