Windows 10 will reach EOS (end of support) on October 14, 2025. For more information, see this article.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Jei jums reikia pagalbos, užduokite naują klausimą.

CSS to show close tab button when mouse hover a tab

  • 1 reply
  • 0 have this problem
  • 77 views
  • Paskiausią atsakymą parašė cor-el

Testxxxx1234
Testxxxx1234
more options

Currently I'm using the css from this thread https://support.mozilla.org/en-US/questions/1341968 Now with firefox 113, this no longer works, I'm hoping someone can help me with this.

Currently I'm using the css from this thread [https://support.mozilla.org/en-US/questions/1341968 https://support.mozilla.org/en-US/questions/1341968] Now with firefox 113, this no longer works, I'm hoping someone can help me with this.

Modified by Testxxxx1234

Chosen solution

I currently use this code to always hide all close button and show them on hover after a short delay to prevent closing a tab when selecting it. 

/* TAB: close button colors on hover */
.tab-close-button:hover {
  background-color: rgba(255,0,0,.7) !important;
  fill: white !important;
}

.tabbrowser-tab:not([pinned]) .tab-close-button {
  display: inline-flex !important;
}

.tabbrowser-tab:not([pinned]) .tab-close-button {
  max-width: 0 !important;
  transition: all 100ms ease-in-out 100ms;
}

/* close button shown on hover */
 .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  max-width: 20px !important;
  transition: all 250ms ease-in-out 800ms;
}

Skaityti atsakymą kartu su kontekstu 👍 2

All Replies (1)

cor-el
cor-el
  • Moderator
more options

Chosen Solution

I currently use this code to always hide all close button and show them on hover after a short delay to prevent closing a tab when selecting it. 

/* TAB: close button colors on hover */
.tab-close-button:hover {
  background-color: rgba(255,0,0,.7) !important;
  fill: white !important;
}

.tabbrowser-tab:not([pinned]) .tab-close-button {
  display: inline-flex !important;
}

.tabbrowser-tab:not([pinned]) .tab-close-button {
  max-width: 0 !important;
  transition: all 100ms ease-in-out 100ms;
}

/* close button shown on hover */
 .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  max-width: 20px !important;
  transition: all 250ms ease-in-out 800ms;
}