Disabling link control anchor elements

Gantt
#1

Gantt allows u to add a left and right side containers for each task on the timeline.
However when i hover the mouse pointer over one of these containers, the circular link control anchor elements appear (the ones which are meant to be the start/end point of the link between two tasks).

How can i make them appear ONLY IF the mouse is over the task itself but not over the left and right side containers?

#2

Hello Nikolai,
The hover style is added to the main part of the task bar element that has the gantt_task_line class name:

.gantt_task_line:hover .gantt_link_control div {
  display: block;
}

1468×1020 223 KB

In other cases, the link elements have the display: none; style rule. So, you cannot use the hover element on them to show them.

You can redefine the styles and make the link drag elements appear only when the mouse is over the gantt_link_control element:

.gantt_task_line:hover .gantt_link_control div {
  display: block;
}

.gantt_link_control div {
  visibility: hidden;
}

.gantt_link_control:hover div {
  visibility: visible;
}

But in that case, the link drag elements won’t be displayed when the mouse is over the task bar.

You can see how it works in the following snippet:
https://snippet.dhtmlx.com/jdlz4r42

You can try to manually hide these elements by using the onMouseMove event handler:
https://docs.dhtmlx.com/gantt/api__gantt_onmousemove_event.html

Here is an example of how it can be implemented:
https://snippet.dhtmlx.com/llpj8wky

I didn’t test how it works in different scenarios, so maybe you will need to do something else to make it work correctly.