Changing hover highlight on gantt

Gantt
#1

When you hover over a task on the WBS tree to the left the task his highlighted.

I would like to do 3 things

  1. Change the color of the highlight text on hover
  2. Change background color on hover.
  3. Remove highlight completely on hover.
  4. Change highlight background and text color after click highlight.
    How can I do this?

I’ve tried this
.gantt_grid_data .gantt_row:hover,
.gantt_grid_data .gantt_row.odd:hover,
.gantt_grid_data .gantt_row:hover .gantt_cell,
.gantt_grid_data .gantt_row.gantt_selected .gantt_cell,
.gantt_grid_data .gantt_row:hover .gantt_cell {
background-color: none !important;
color: black !important;
background-image: none !important;
}

but that doesn’t change anything.

#2

Hello,

Change the color of the highlight text on hover

You need to use this rule:

.gantt_grid_data .gantt_row:hover .gantt_tree_content{
    color: orange;
}

Here is the snippet:
http://snippet.dhtmlx.com/3f67209cd

Change background color on hover.

You need to use the following rules:

.gantt_grid_data .gantt_row.odd:hover,.gantt_grid_data .gantt_row:hover{
    background-color: rgba(183,237,83,0.4);
}

Here is an example:
http://snippet.dhtmlx.com/5b04e975a

Remove highlight completely on hover.

You can set the following CSS rule:

.gantt_grid_data .gantt_row.odd:hover,.gantt_grid_data .gantt_row:hover{
    background-color:unset
}

Here is an example:
https://snippet.dhtmlx.com/e17beb441

If you want to keep the highlight for the selected tasks, you need to add these rules:

.gantt_grid_data .gantt_row.odd:hover,.gantt_grid_data .gantt_row:hover{
    background-color:initial;
}

.gantt_grid_data .gantt_row.gantt_selected,.gantt_grid_data .gantt_row.odd.gantt_selected,.gantt_task_row.gantt_selected{
    background-color:#fff3a1
}

Here is another snippet:
https://snippet.dhtmlx.com/a2d13546a

Change highlight background and text color after click highlight.

If you want to change it for the selected tasks, you need to use the following rules:

.gantt_grid_data .gantt_row.gantt_selected,.gantt_grid_data .gantt_row.odd.gantt_selected,.gantt_task_row.gantt_selected{
    background-color:greenyellow;
}
  
.gantt_selected .gantt_tree_content{
    color: violet;
}

Here is an example:
http://snippet.dhtmlx.com/30654fee4
If you need something else, please clarify.

#3

Thank you very much!

#4

Hello, first of all, thank you for easy and effective solutions! I have a question though. If you click on a task, thus selecting it, it still has the old default color. How can i fix this?

#5

Hello,
Thank you for the positive feedback.
You need to change the gantt_selected style rule.

.gantt_grid_data .gantt_row.gantt_selected,.gantt_grid_data .gantt_row.odd.gantt_selected,.gantt_task_row.gantt_selected{
  background-color: cyan;
}

Here is the snippet that demonstrates how it works:
http://snippet.dhtmlx.com/d4f9e7f02

#6

Thanks, i appreciate the quick answer.