1

As the hover event is a TrustedEvent, it's like a bit complicated to turn around it, to try to simulate it, etc.

I'm looking for a way to detect, when an element get hovered, if his style properties are changing.

Here is a snippet that could illustrate a basic case.

.change-when-hovering:hover {
  color: blue;
}
<p>
  It won't have any style changes, we don't want to console.log the element when hovering
 </p>
<p class="change-when-hovering">
  It will have style changes, we want to console.log this element when hovering BECAUSE his style properties has changed (and not because he has the 'change-when-hovering' class)
</p>

Thanks in advance !!

Dash
  • 742
  • 7
  • 19
  • What is your higher level use case for doing this? Determining style changes can be complex so understand use case might help – charlietfl Aug 05 '18 at 17:00
  • Is `$('.change-when-hovering').on('mouseover', function() { ... });` what you are looking for? – Chaska Aug 05 '18 at 17:01
  • @charlietfl It's about sending to a mirror page that an elemnt has been hovered. – Dash Aug 05 '18 at 17:03
  • can you elaborate on that more? what you are asking is far from trivial – charlietfl Aug 05 '18 at 17:04
  • I have a mirror page that can reflect DOM changes I would like to be able to trigger hover style changes coming from the origin page into the mirrored one. – Dash Aug 05 '18 at 17:05
  • So perhaps you should show us code for how that works then. Sounds like what you really should be doing is simulating events in other page and again....this is very far from trivial and you haven't shown us a single bit of research so far or what you have already tried – charlietfl Aug 05 '18 at 17:07
  • I would prefer to keep the code internally. If it's too difficult to do without, i will try to find another way to success. And, I've already done a lot of stuff using a MirrorClient and WebSockets so yeah, "I haven't shown us a single bit of research so far or what you have already tried", this is a bit easy. But i can understand. – Dash Aug 05 '18 at 17:11
  • Have you looked into Mutation observers? – charlietfl Aug 05 '18 at 17:11
  • It sounds like you'd want to use a Mutation Observer, there's a sample answer here -> https://stackoverflow.com/questions/42121565/detecting-class-change-without-setinterval – Daniel Persaud Aug 05 '18 at 17:12
  • Mutation Observers doesn't trigger on hover styles changes unfortunately...If you change style properties in the browser, mutation obs is triggered. But if style properties get changed by an hover event, mutation obs doesn't detect it. – Dash Aug 05 '18 at 17:14
  • Well that is a big problem with events also since you would have to go through computed style but you don't have baseline to check against. Simulating events in mirror page is what i would try – charlietfl Aug 05 '18 at 17:17
  • Yeah, I can send an event to the mirror page when hovering any element on the original page, but I wanted to find a way to reduce the number of element triggering this event. Especially by detecting elements having their style properties changing when hovering ! – Dash Aug 05 '18 at 19:03

0 Answers0