javascript - 触发 :hover Repaint on DOM change

Question

我在 div 中有 UI 控件。整个div有悬停效果。如果用户遇到错误，绝对定位的 div 会覆盖控件并询问如何继续。控件不再悬停，但在用户移动鼠标之前不会触发重绘。有解决这个问题的已知方法吗？我正在使用 Chrome

这是一个 fiddle :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 解决方案，我会接受最好的。

Answer 1

css方式

你可以添加一个基于兄弟选择器的 css 规则，如下所示:

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

这假设您 prepend .cover至 .container你可能必须在 .cover 上设置 z-indices|和 .hoverable .

反射(reflect)在这个 fiddle 中: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();

fiddle :

http://jsfiddle.net/marionebl/L655r/5/