Question

我有一些界面包含javascript事件，这些事件会导致CSS更改，从而重新定位UI中的元素。我对悬停状态有疑问，其中悬停状态在这些更改后没有正确更新。我在这里简单介绍了一个非常简单的例子。

悬停＆＃34;块1＆＃34; 观察：＆＃34;阻止一个＆＃34;变成蓝色
点击＆＃34;块1＆＃34; 观察：css更改会导致块翻转
观察：鼠标现在正在盘旋＆＃34;块2＆＃34;但是＆＃34;块1＆＃34;还是蓝色的
预期行为：＆＃34;块2＆＃34;变换后应该是蓝色的＆＃34;块1＆＃34;应该是红色的。
观察：稍微移动鼠标会导致他们“纠正”＃34;

＆＃13;

$(function() {
    $('.block').click(function () {
       $('.container').toggleClass('flipped'); 
    });
});

＆＃13;

.container {
    display: flex;
    width: 150px;
}

.container.flipped {
     transform: rotate(180deg);    
}

.block {
    height: 50px;
    width: 50px;
    background-color: red;
    margin: 10px;
}

.block:hover {
    background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="block">
        block 1
    </div>
    <div class="block">
        block 2
    </div>
</div>

＆＃13;

有没有办法确保在应用类并发生更改后正确更新悬停状态？

Answer 1

这个解决方案有点像黑客。它不能很好地工作，但它完成了工作。

$(function() {
    $('.block').click(function () {
       $('.container').hide();
       $('.container').toggleClass('flipped');
       $('.container').show(0);
    });
});

隐藏容器，翻转然后再次显示容器会强制重绘页面的这一部分，这似乎会再次触发:hover选择器。

注意：将0的持续时间传递给show()似乎是必要的。

这是一个演示：

CodePen Link

转换后触发css悬停状态更改

1 个答案: