How does JSXGraph add hover effect?

everyone! I am new to jsxgraph, and I would like to know how does JSXGraph add all the hover effect to many elements? Since I can't find any class changed or mouseover event on, for example, the function graph(path element in svg, the slider baseline which turn grey when hover...), and I didn't find what I want in the src folder...

Also how to change those effect? are those something to do with highlightCssStyle?

Thank you for reading my question:)

Solution

JSXGraph implements its own hover algorithm. For this, all elements come with the method hasPoint(x, y), where [x,y] are the coordinates of mouse / pen / finger position in pixel. JSXGraph does not use the hover event from SVG, because we also enable highlighting if the pointer device is close to the element (e.g. on touch screens), see the attribute precision.

The appearance of highlighting can be controlled by the following attributes:

highlightStrokeWidth
highlightStrokeColor
highlightStrokeOpacity
highlightFillColor
highlightFillOpacity
highlightCSSClass: text / image
highlightCssDefaultStyle: text
highlightCssStyle: text

Further, there is the attribute transitionDuration which controls the time interval for the transition from default appearance to highlighting and back (in msec).

You can either change the attributes globally:

JXG.Options.line.highlightStrokeWidth = 5;

or per element: var li = board.create('line', [...], {highlightStrokeWidth: 5});

Further, you can find the default CSS styles for image and texts in jsxgraph.css