Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

Pomoc přepytać

Hladajće so wobšudstwa pomocy. Njenamołwimy was ženje, telefonowe čisło zawołać, SMS pósłać abo wosobinske informacije přeradźić. Prošu zdźělće podhladnu aktiwitu z pomocu nastajenja „Znjewužiwanje zdźělić“.

Dalše informacije

Non-selected Tabs - Highlight on Hover

  • 5 wotmołwy
  • 1 ma tutón problem
  • 40 napohladow
  • Poslednja wotmołwa wot Slouch

more options

I'd like to highlight a non-selected tab when hovering the mouse over it.

I've tried this code in userChrome.css, but it has no effect...

  .tab-background:not([selected]):hover { /* highlight on mouseover */
     background-color: #dbe3eb !important;
  }

Is this method correct, or is there a better way?

Thanks!

I'd like to highlight a non-selected tab when hovering the mouse over it. I've tried this code in userChrome.css, but it has no effect... .tab-background:not([selected]):hover { /* highlight on mouseover */ background-color: #dbe3eb !important; } Is this method correct, or is there a better way? Thanks!

Wot Slouch změnjeny

Wubrane rozrisanje

By chance, I tried the following, and it works...

#TabsToolbar .tabs-newtab-button:hover {
    background-color: #dbe3eb !important;
}

.tabs-newtab-button:hover .toolbarbutton-icon {
   background-color: #dbe3eb !important;
}

Didn't need the not([selected]) attribute, so I removed that as well.

Thank you :)

Tutu wotmołwu w konteksće čitać 👍 0

Wšě wotmołwy (5)

more options

Does this code in userChrome.css wor for you?


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

.tabbrowser-tab:not([selected]):hover .tab-content { /* highlight on mouseover */
   background-color: #dbe3eb !important;
}

Wot cor-el změnjeny

more options

Yes, that does work, however it breaks my "Open a new tab" button, which no longer highlights on mouseover (only the '+' sign icon highlights, not the background of the button).

My code appears below yours. Without your code, the entire "Open a new tab" button highlights correctly.

.tabbrowser-tab:not([selected]):hover .tab-content { /* highlight non-selected tabs on mouseover */
   background-color: #dbe3eb !important;
}

#TabsToolbar .tabs-newtab-button {
  border-top: var(--classic_squared_tabs-border_size) solid var(--classic_squared_tabs-border2) !important;
  border-left: var(--classic_squared_tabs-border_size) solid var(--classic_squared_tabs-border2) !important;
  border-right: var(--classic_squared_tabs-border_size) solid var(--classic_squared_tabs-border2) !important;
  border-top-left-radius: var(--classic_squared_tabs-border-radius) !important;
  border-top-right-radius: var(--classic_squared_tabs-border-radius) !important;
  min-width: 0px !important;
  width: 28px !important;
  margin-bottom: 0px !important;
  border-color: #868b98 !important;
}

.tabs-newtab-button .toolbarbutton-icon {
 min-width: 0px !important;
 min-height: 0px !important;
 width: 14px !important;
 height: 14px !important;
 margin: 0px !important;
 margin-bottom: 0px !important;
 padding: 0px !important;
 box-shadow: unset !important;
}

Wot Slouch změnjeny

more options

I think that this has more to do with background: unset !important; When I remove this rule then at least I get some change on hover, but it is only a small box with your code.

more options

Yes, I took the background: unset line out, and now only the '+' icon is highlighted on mouseover.

Is there a way to have the entire button highlighted?

Wot Slouch změnjeny

more options

Wubrane rozrisanje

By chance, I tried the following, and it works...

#TabsToolbar .tabs-newtab-button:hover {
    background-color: #dbe3eb !important;
}

.tabs-newtab-button:hover .toolbarbutton-icon {
   background-color: #dbe3eb !important;
}

Didn't need the not([selected]) attribute, so I removed that as well.

Thank you :)

Wot Slouch změnjeny