How to remove hover state from zoom control?

How to remove hover state from zoom control?

Posted by: averma on 25 August 2026, 8:47 am EST

• 

  averma

  • Post Options:
  • Link
    Copy

  Posted 25 August 2026, 8:47 am EST - Updated 25 August 2026, 8:52 am EST

  I want to remove default green hover state from “Minus” icon. please let me know a way .
  
  

  Below is the css i’m using
  
  .gc-statusbar {
  
  padding-right: 30px;
  
  }
  
  .statusbar-light .gc-statusbar {
  
  background: #FFFFFF;
  
  color: #00000099;
  
  }
  
  .statusbar-light .gc-statusbar-statusitem-container,
  
  .statusbar-light .gc-statusbar-statusitem-container span,
  
  .statusbar-light .gc-statusbar-zoom-panel {
  
  color: #00000099;
  
  }

  /* Dark mode */
  
  .statusbar-dark .gc-statusbar {
  
  background: #1C1142;
  
  color: #FFFFFF;
  
  }
  
  .statusbar-dark .gc-statusbar-statusitem-container,
  
  .statusbar-dark .gc-statusbar-statusitem-container span,
  
  .statusbar-dark .gc-statusbar-zoom-panel {
  
  color: #FFFFFF;
  
  }

  .gc-statusbar-slider-add-btn-container {
  
  padding-left: 10px;
  
  }

  /* Light mode */
  
  .statusbar-light .gc-statusbar-slider-back-progress {
  
  background: #0000001A;
  
  }

  .statusbar-light .gc-statusbar-slider-middle-line {
  
  background-color: black;
  
  }

  .statusbar-light .gc-statusbar-slider-btn,
  
  .statusbar-light .gc-statusbar-slider-add-btn {
  
  filter: brightness(0);
  
  }

  /* Dark mode */
  
  .statusbar-dark .gc-statusbar-slider-back-progress {
  
  background: #FFFFFF40;
  
  }

  /* Remove default SpreadJS green hover color */
  
  .statusbar-light .gc-statusbar-slider-back-progress:hover,
  
  .statusbar-dark .gc-statusbar-slider-back-progress:hover {
  
  background: inherit;
  
  }

  /* Remove hover background from zoom slider container */
  
  .statusbar-light .gc-statusbar-slider-container:hover,
  
  .statusbar-dark .gc-statusbar-slider-container:hover,
  
  .statusbar-light .gc-statusbar-slider-add-btn-container:hover,
  
  .statusbar-dark .gc-statusbar-slider-add-btn-container:hover {
  
  background: transparent;
  
  }

  /* Remove default hover styling from slider thumb */
  
  .statusbar-light .gc-statusbar-slider-thumb:hover,
  
  .statusbar-dark .gc-statusbar-slider-thumb:hover {
  
  background: inherit !important;
  
  border-color: inherit !important;
  
  }

  .gc-statusbar-slider-back .gc-statusbar-slider-drag-bar {
  
  border: 1px solid #00000073;
  
  color: #FFFFFF;
  
  opacity: 1 !important;
  
  }

  .gc-statusbar-slider-btn {
  
  height: 35px !important;
  
  }

  .gc-statusbar-slider-add-btn {
  
  height: 35px !important;
  
  }

  .gc-statusbar-zoom-panel {
  
  margin-top: 2px !important;
  
  }

  .statusbar-light .gc-statusbar-slider-btn:hover::before,
  
  .statusbar-light .gc-statusbar-slider-btn:hover::after,
  
  .statusbar-light .gc-statusbar-slider-add-btn:hover::before,
  
  .statusbar-light .gc-statusbar-slider-add-btn:hover::after {
  
  background-color: transparent !important;
  
  }

  .statusbar-light .gc-statusbar-slider-btn:hover,
  
  .statusbar-light .gc-statusbar-slider-add-btn:hover {
  
  background-color: transparent !important;
  
  filter: brightness(0);
  
  }

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 27 August 2026, 5:48 am EST

  Hi,

  Thanks for the detailed CSS! The reason the hover green persists on the “Minus” icon is that the hover background isn’t applied to .gc-statusbar-slider-container (that class doesn’t exist in the DOM) — it’s applied to .gc-statusbar-slider-btn-container, the container element sitting behind the minus icon. Since your selector name didn’t match an actual class, that rule wasn’t taking effect, while your plus-button rule (.gc-statusbar-slider-add-btn-container) was already spelled correctly and seems like worked.

  To fix it, update your override to target the correct container class:

  .statusbar-light .gc-statusbar-slider-btn-container:hover,
  .statusbar-dark .gc-statusbar-slider-btn-container:hover,
  .statusbar-light .gc-statusbar-slider-add-btn-container:hover,
  .statusbar-dark .gc-statusbar-slider-add-btn-container:hover {
    background-color: transparent !important;
  }

  If you also want the pressed/active state cleared, add the same selectors with :active instead of :hover.
  
  If you still face issue then, To better assist you, could you share a minimal working sample along with the steps to replicate the behavior you have observed? This will enable me to investigate the problem more thoroughly. Additionally, It would be helpful if you could provide a GIF or video illustrating the issue.

  Regards,
  
  Priyam