Is there a way to observe property changes made by CSS itself and react via jQuery/JS?

Question

I've taken a look at the MutationObserver class from jQuery in order to achieve an effect that if a specific div becomes invisible that the focus is set to a specific input field.

Sadly this did not work as intended. The problem with that was that I'm making the visibility changed via CSS itself. Thus I have the following situation:

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

In the CSS on :hover over the container the child becomes visible. If there is no hover then the child becomes invisible (and instead an icon image also inside the container becomes visible).

This works quite well BUT as I mentioned I also need to set the focus via jquery as soon as the child becomes invisible. So far I did not find anything that could achieve this so my question is: Is there anything that could achieve this functionality?

Edit due to answers: I tried out the following:

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

The problem there is that it triggers BEFORE the CSS changes apply. Thus the visibility is still visible when the mouseout event fires.

Did you try `if($('.class').is(":visible")){//things to do}` ? — Akshay, Apr 27 '15 at 07:13
yepp. The problem is that I need to react to the change itself already (thus I need to start a program imediately when the CSS says that :hover ends or starts). Thus the problem is not the checking for if it is visible but that it needs to start the methods that will then doSomething(). Thus that these methods are started automatically when the CSS itself changes (hope that is clearer there) — Thomas, Apr 27 '15 at 07:15
How about `$('.yourclass').mouseover(function(){if($('.class').is(":visible")){//things to do}},)` ? — Akshay, Apr 27 '15 at 07:17
Possible duplicate with http://stackoverflow.com/questions/2157963/is-it-possible-to-listen-to-a-style-change-event — DQM, Apr 27 '15 at 07:34
Not sure. Similar at least but duplicate not sure. From what I have read in that question and its answers it sounded like he is setting the style properties via jQuery/JS and wants to check on that (while I'm doing CSS changes via CSS and then want to check via jQuery/JS) — Thomas, Apr 27 '15 at 08:15

kemicofa ghost · Accepted Answer · 2015-04-27T07:30:53.077

1

In jquery you also have .hover()

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

According to jQuery .hover() is just another word for

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

So if you wanted to handle exactly what happens when you enter and when you leave then use the above.

hover documentation here

Update:

Today there isn't an actual way to wait for css to finish. It is recommended to use one or the other and not use both to avoid such situations.

However, a temporary solution would be to:

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

we force js to wait 300 miliseconds. In this time CSS should have had plenty of time to apply it's changes.

edited Apr 27 '15 at 07:30

answered Apr 27 '15 at 07:17

kemicofa ghost

16,349
8
82
131

And is there also the opposite of it? (thus when hover ends.) As note: originally I had huge troubles with the normal html mouseout firing at the wrong times which is why I went down the CSS path as strangely there the :hover fired at the correct times. – Thomas Apr 27 '15 at 07:20
just tried. it fires too early :/ (before the css changes apply) – Thomas Apr 27 '15 at 07:25
I updated my question there (with mouseout but also tried mouseleave) – Thomas Apr 27 '15 at 07:27
@Thomas this is exactly one of the problems I came across last year. Check my previous question here http://stackoverflow.com/questions/24180350/js-launches-before-css – kemicofa ghost Apr 27 '15 at 07:27
1

Yeah your problem back then seems to be quite similar with what I observed while trying your solution. Tbh I'm quite disappointed there in JS and CSS (never thought that such a simple usecase could be that problematic / one has to resolve to such methods to solve it). – Thomas Apr 27 '15 at 07:38

Is there a way to observe property changes made by CSS itself and react via jQuery/JS?

1 Answers1