Question

我在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解决方案，我会接受最好的解决方案。

Answer 1

css方式

您可以添加基于兄弟选择器的css规则，如下所示：

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

这假设您prepend .cover到.container，您可能需要在.cover和.hoverable上设置z-indices。

反映在这个小提琴中：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/

触发：悬停重绘DOM更改

1 个答案:

css方式

js方式