Hover effect on fill color and search icon

Aspose.Cells Product Family
1

I am using Aspose.Cells.GridJs, and I would like to change the hover color for the “Fill Color” icon. Is it possible to customize the icon’s appearance on hover using client-side scripting or CSS?

image.png (10.1 KB)

2

@sarathepiq

Yes, you can customize the hover effect for the “Fill Color” icon in Aspose.Cells.GridJs using CSS. To achieve this, target the specific class or ID of the icon and apply a hover style. Here’s a simple example:

.fill-color-icon {
    transition: background-color 0.3s;
}

.fill-color-icon:hover {
    background-color: #f0f0f0; /* Change to your desired hover color */
}

Ensure you replace .fill-color-icon with the actual class or ID used for the “Fill Color” icon in your implementation. This CSS will change the background color of the icon when hovered over.

For additional customization or specific JavaScript interactions, you can implement client-side scripting to further enhance the hover effect.

3

@sarathepiq
The icon appearance is fixed, it uses the svg file defined in the .css file. Can you show us the desired ui result example.

4

I have a custom icon where the color changes to blue on hover. Can we apply the same hover effect to the “Fill Color” icon in Aspose.Cells.GridJs?

image.png (7.6 KB)

5

@sarathepiq
https://unpkg.com/gridjs-spreadsheet/xspreadsheet.css
the below css is the hover active effect for the toolbar item.

.x-spreadsheet-toolbar .x-spreadsheet-toolbar-btn:hover,
.x-spreadsheet-toolbar .x-spreadsheet-toolbar-btn.active {
  background: rgba(0, 0, 0, 0.08);
}

you need to update the css style to the desired .

6

This will change the background color , I want o change the icon color.

7

@sarathepiq

.x-spreadsheet-toolbar .x-spreadsheet-toolbar-btn:hover,
.x-spreadsheet-toolbar .x-spreadsheet-toolbar-btn.active {
      background: rgba(0, 0, 0, .08);
}

.x-spreadsheet-toolbar .x-spreadsheet-toolbar-btn:hover .x-spreadsheet-icon-img,
.x-spreadsheet-toolbar .x-spreadsheet-toolbar-btn.active .x-spreadsheet-icon-img {
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}
  //you can try more :    
 // filter: invert(1); // revert
 // filter: hue-rotate(180deg);  
 // opacity: 1; //

if you want to apply to “fill color” toobar icon button only.
inspect this button in browser, we can find the related css key for this button is “bgcolor”.
so you can try:

.x-spreadsheet-toolbar .x-spreadsheet-toolbar-btn:hover .x-spreadsheet-icon-img.bgcolor,
.x-spreadsheet-toolbar .x-spreadsheet-toolbar-btn.active .x-spreadsheet-icon-img.bgcolor {
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}