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

Trigger css hover state change after transition

本文关键字：状态 悬停 css 转换      更新时间：2024-05-07

我有一些UI，它包含javascript事件，这些事件会导致CSS更改，从而重新定位UI中的元素。我遇到了悬停状态的问题，在这些更改之后，悬停状态不会正确更新。我在这里总结了一个非常简单的例子。

  1. 悬停在"块1"观察："块一"变蓝
  2. 单击"块1"观察：css的更改会导致块翻转
  3. 观察：鼠标现在悬停在"块2"上，但"块1"仍然是蓝色
  4. 预期行为：变换后"块2"应为蓝色，"块1"应为红色
  5. 观察：轻轻移动鼠标会使它们"正确"

$(function() {
    $('.block').click(function () {
       $('.container').toggleClass('flipped'); 
    });
});
.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;
}
<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>

有没有一种方法可以确保在应用类并发生更改后，悬停状态得到正确更新？

这个解决方案有点像黑客。它并不完美，但它完成了任务。

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

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

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

这里有一个演示：

CodePen链接

相关文章：