javascript - 在DOM更改时触发:hover重绘

我在一个div中有UI控件。整个div有一个悬停效果。如果用户得到一个错误，一个绝对定位的div将覆盖控件并询问如何继续。控件不再悬停，但在用户移动鼠标之前不会触发重新绘制。有没有已知的方法来解决这个问题？我在用Chrome
这是小提琴：http://jsfiddle.net/acbabis/L655r/
HTML格式：

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

JS公司：

$(function() {
    $('.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);
    });
});

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

编辑：我知道用JS可以解决这个问题，我愿意使用JS；但是我很好奇是否有人能给我展示一个CSS/HTML触发重绘的唯一方法。当然，如果我只得到JS解决方案，我会接受最好的。

最佳答案

css方式
您可以添加基于同级选择器的css规则，如下所示：

.cover + .hoverable  {
    background-color: blue;
 }

这假设您将prepend.cover设置为.container并且您可能需要在.cover和.hoverable上设置z-索引。
反映在这个小提琴：http://jsfiddle.net/L655r/8/
js之路
通常，您可以使用以下简单方法强制在.hoverable或.clickme上重新绘制
jQuery插件：

$(function() {
    $.fn.redraw = function() {
        var $this = $(this);
        $this.hide();

        setTimeout(function(){
            $this.show();
        },0);

        return $this;
    };
});

用法：

$('.hoverable').redraw();

小提琴：
http://jsfiddle.net/marionebl/L655r/5/

关于javascript - 在DOM更改时触发:hover重绘，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21740596/