1

How can I trigger two hoverevents (for example css-hover-pseudoclass) at once? Also when the cursor is going from A to B, it should not be fired that A was left. How can I achieve this, in HTML, or JS, or CSS?

Image of the problem

White triangles represent the cursor position.

Impulse The Fox
  • 2,638
  • 2
  • 27
  • 52

2 Answers2

1

Write two functions: onHoverA and onHoverB. Set onHoverA to the onHover attribute for element A, and onHoverA(); onHoverB(); as the attribute for element B.

Derek Brown
  • 4,232
  • 4
  • 27
  • 44
  • Well, the problem is, I'm doing a smooth color change on a hover in css, because it's most simple there. Now I really don't want to smoothly change colors in JS, it's a mess, and I think it's not possible to manually trigger pseudo-classes in css (to also trigger A:hover when B:hover is active). – Impulse The Fox Oct 12 '17 at 20:09
  • By default both hover classes will be applied if you hover over the child element. See this example: https://jsbin.com/mubuhuqika/edit?html,css,js,output – Derek Brown Oct 12 '17 at 20:21
0

This is not possible with SVG because there is no DOM-nesting for elements in SVG as it is in HTML, but events bubble up at DOM-level, thus ignoring the SVG-element at the higher Y-Level.

Impulse The Fox
  • 2,638
  • 2
  • 27
  • 52