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

Cuireadh an snáithe seo sa chartlann. Cuir ceist nua má tá cabhair uait.

CSS to show close tab button when mouse hover a tab

  • 1 freagra
  • 0 leis an bhfadhb seo
  • 1 view
  • Freagra is déanaí ó 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.

Athraithe ag Testxxxx1234 ar

Réiteach roghnaithe

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;
}

Read this answer in context 👍 2

All Replies (1)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Réiteach Roghnaithe

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;
}