Adding the :hover pseudoclass

Question

Is there any way to programmatically have D3 add a ":hover" to a selection? If not, how can I do this using straight JavaScript?

Did you look in the D3 docs? What have you tried? etc. etc. You have enough rep to know better. — Randy Casburn, Dec 04 '18 at 04:17
Possible duplicate of [How do I simulate a mouseover in pure JavaScript that activates the CSS ":hover"?](https://stackoverflow.com/questions/17226676/how-do-i-simulate-a-mouseover-in-pure-javascript-that-activates-the-css-hover) — altocumulus, Dec 04 '18 at 10:38
@RandyCasburn, there was nothing to try as it's not possible in JS, as the answers below show. D3 documentation would not help as this is not specific to D3. Rep has nothing to do with it. — user994165, Dec 31 '18 at 19:30

score 3 · Accepted Answer · answered Dec 04 '18 at 04:51

You can't programmatically add :hover from JavaScript (or D3). I'd recommend using a CSS class with the same styling rules:

#foo:hover, #foo.selected { ... }

And then add the .selected class from D3.

score 0 · Answer 2 · answered Dec 04 '18 at 10:15

As already explained by cdrini, it is not exactly possible to accomplish this by JavaScript.

Instead, you can use this code to add a class to an element on hover:

element.onmouseover = function(){ this.classList.add('foo'); };
element.onmouseout = function(){ this.classList.remove('foo'); };

2 Answers2