有没有办法观察CSS本身所做的属性更改并通过jQuery / JS做出反应？

Question

我已经从jQuery看了一下MutationObserver类，以便实现一个效果，即如果一个特定的div变得不可见，焦点被设置为一个特定的输入字段。

可悲的是，这并没有按预期发挥作用。问题在于我通过CSS本身改变了可见性。因此我有以下情况：

<div id="container">
    .....
    <div id="child">Test</div>
</div>
<input id="MyInputToFocusOn"/>

在CSS中：将鼠标悬停在容器上，子项变为可见。如果没有悬停，则子项变为不可见（而容器内的图标图像也变为可见）。

这很有效但是我提到我还需要在孩子变得不可见时通过jquery设置焦点。到目前为止，我没有找到任何可以实现这一点的东西，所以我的问题是：有什么能够实现这个功能吗？

由于答案而编辑： 我尝试了以下内容：

$('#Container').mouseout(function () {
        if ($('#Container')[0].currentStyle.visibility == "hidden") {
             .....
        }
});

问题在于，在应用CSS更改之前触发它。因此，当mouseout事件触发时，可见性仍然可见。

Answer 1

在jquery中你也有.hover（）

$('.container').hover(function(){
   //set focus here
});

根据jQuery .hover（）只是

的另一个词

$('.container').mouseenter(function(){}).mouseleave(function(){});

因此，如果您想要准确处理当您进入和离开时会发生什么，请使用上述内容。

hover documentation here

<强>更新

今天没有实际的方法等待让css完成。建议使用其中一种，不要同时使用这两种情况。

然而，临时解决方案是：

$('.container').mouseenter(function(){
  setTimeout(function(){
    //do stuff here
  }, 300);
});

我们强制js等待300毫秒。在这段时间里，CSS应该有足够的时间来应用它的更改。